I've got a page, with three sections. Each section is an that takes the entire view of the page. I would like the article and background to fit within the mobile device screen, as it does on a desktop, but can't figure out how to get the article to adjust. Here's a fiddle: http://jsfiddle.net/kRjUn/
Here's the CSS:
html {
height: 100%;
}
body {
font-size: 1em;
line-height: 1.4;
height: 100%;
}
article {
height: 100%;
padding-top: 2em;
}
.wrapper {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: inherit;
}
.content {
margin-top: 25em;
height: inherit;
}
I found this gridless boilerplate, and set the body height to 100% and it seemed to work great. I also just used a div instead of article. Anyone looking for a clean and responsive boilerplate I would def. give this one a shot: https://github.com/thatcoolguy/gridless-boilerplate
What i feel that you code is not handling case for each devices, you need to use CSS 3 media query feature which can help you.
I think you can use HTML5 boilerplate template as example.
Here you go, use display tables.
article {
height: 100%;
padding-top: 2em;
display: table;
}
.wrapper.content {
padding: 2em;
display: table-cell;
}
DEMO
Related
Okay so ill explain this as best i can.
I have a booking page widget on my website from simplybooking.
It works great on desktop but does not scale on mobile
This is the page in question : https://www.meetaroundthecampfire.com/bookings-checkout/
So this is the code ive tried to use in the page, to make it responsive
<div class="embed-container"><script src='//simplybook.me/v2/widget/widget.js'></script> <script>var widget = new SimplybookWidget({'widget_type':'iframe','url':'https:\/\/meetaroundthecampfire.simplybook.me','theme':'concise','theme_settings':{'timeline_show_end_time':'0','light_font_color':'#ffffff','sb_base_color':'#5a3afd','booking_nav_bg_color':'#ffffff','dark_font_color':'#333333','hide_img_mode':'0','sb_busy':'#dad2ce','sb_available':'#d3e0f1'},'timeline':'modern','datepicker':'top_calendar','is_rtl':false,'app_config':{'predefined':[]}});</script></div>
With the following css in the stylesheet
.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }
But it still doesnt come up right?
Any ideas or help from you legends? because im confused!
Cheers
Ez
You have width 1800px at:
#main2 {
margin: 0 auto 30px;
width: 1800px;
}
You should edit this with media queries. Put it by default with 100%, and then with queries change it correspondingly. Example:
//default
#main2 {
margin: 0 auto 30px;
width: 100%;
}
For devices > 768px:
#media (min-width: 768px){
#main2 {
width: 750px;
}
}
etc. etc...
I'm trying to make a responsive layout with media queries with flexbox. I need to make a layout with two sidebars on the right, right under each other, like this:
Image: aside right under the related
The current situation is like this (I'm able to move the box to the right too, but there is still a white space under the related, even though the height is good). Image: aside is on the the next line and not under the related
Simplified code:
body {
display: flex;
flex-direction: row;
}
header {
flex: 0 1 25%;
}
main {
flex: 0 1 40%;
}
.related {
flex: 0 1 17%;
height: 100%;
}
aside {
flex: 0 1 17%;
}
footer {
display: flex;
flex: 0 1 100%;
}
I can't put a wrapper for these two boxes in the HTML (I can't use a wrapper in the HTML itself, hence I use the body as flex container). Is what I want even possible with flexbox, or what kind of other technique could I use for this? I tried a lot of different things with the height, I even tried Javascript to make a dynamic wrapper, but that didn't work well with the media queries...
Please let me know if you need more information.
Your usage of body as a flex container, should not be a problem, unless there is a design problem. i think you should make layout design like
<http://codepen.io/erdysson/pen/wKyEzZ%20>
I hope, this solves the problem and is what you want.
Achieving the expected result without modifying your HTML markup with flexbox is a bit tricky.
However i believe the following example will help you, even though it´s not using the flexbox:
* {
box-sizing: border-box;
}
header,
aside,
footer,
.main,
.related {
min-height: 100px;
float: left;
position: relative;
}
header {
width: 25%;
background: #f00;
min-height: 200px;
}
.main {
width: 50%;
background: #0f0;
min-height: 200px;
}
.related {
width: 25%;
background: #0ff;
}
aside {
width: 25%;
background: #f0f;
float: right;
}
footer {
width: 100%;
background: #ff0;
}
header:after,
aside:after,
footer:after,
.main:after,
.related:after {
content: attr(data-title);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
}
<header data-title="header"></header>
<div class="main" data-title="main"></div>
<div class="related" data-title="related"></div>
<aside data-title="aside"></aside>
<footer data-title="footer"></footer>
I'm using Wordpress theme Canvas by Woothemes. I'm trying to center the site description text underneath the logo. Here is the site: http://barkhascustomsourcing.com
Here is the current CSS I am using. It's not responsive, I know, but I need to re-write so it is.
#logo .site-description {
display: inline-block !important;
line-height: 25px;
margin-left: -330px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 1000px;
}
Any suggestions?
To make this properly responsive you will have to do a lot more than only adjust this class. Heres how you can implement it for your header section:
#logo { width: 100%; }
#logo > a {
width: 100%;
max-width: 350px;
margin: 0px auto;
display: block;
}
#logo > span.site-description {
width: 100%;
max-width: 1000px;
margin: 0px auto;
display: block !important;
}
By making the outer and inner box following the full width but constraining them with max-width will make them responsive.
Now, this is only a small part of your site. I'm not doing the entire thing for you here, but you get the general gist. It also requires you to look at almost any elements, as resizing will require you to make elements that take up a natural; height and expand as their width decreases. So actually, you cannot use any pixel based widths or heights anywhere, only max-widths and max-heights.
PS: Next time you ask a question, please include what you have tried yourself. Show us that you are not outsourcing your work to us :)
Following things you need to update.
#logo {
margin: 0px auto;
width: 100%;
text-align: center;
}
#logo .site-description {
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 100%;
display: block !important;
}
<style type="text/css">
.header
{
background-color: #000000;
margin-bottom: 10px;
}
.body
{
background-color: #FFFFFF;
margin-bottom: 10px;
}
.footer
{
background-color: #000000;
}
.body #content
{
width: 80%;
min-height: 500px;
float: left;
background-color: red;
}
.body #menu
{
width: 20%;
min-height: 500px;
float: right;
background-color: blue;
}
</style>
The above code works but the "margin-bottom" property doesn't create space at the bottom of the body div. Why is that so?
Try overflow-y: auto on the .body selector. Should then recognise the height of the floats.
Here is a jsfiddle that shows the border: http://jsfiddle.net/PDk7b/
The styles that I added are:
.body
{
background-color: #FFFFFF;
margin-bottom: 10px;
min-height: 500px;
display: block;
}
Hope that helps.
Bob
The technical answer to your question likely depends upon which browser you're using. In one browser, the answer might be that Fred forgot to implement it and no testing caught it. Another browser might have an answer that the project manager didn't find the issue to be significant enough to fix yet.
If you're dealing with CSS and browsers in any meaningful way, you just have to get used to all the quirks. Some browsers require weird contortions to do a specific task right, while another browser requires none whatsoever. Then, on another task, the roles reverse.
I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work.
What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm which does exactly what I want but I can't get to work either.
The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure.
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?).
If anyone could give me any help or guidance I'd be soooooo grateful.
I believe the code you are looking for is here:
http://www.themaninblue.com/writing/perspective/2005/08/29/
I implemented this just now on my site, and it's working great!
it's a while since you asked your question but hopefully this helps!
This is the source that helped me achieve such a layout :
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx
Put everything in the Main in a Wrapper and use the following code:
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}