I created this site off of a PSD, all relatively elementary CSS. I have unwanted outside padding on a mobile device AND a tablet. I want the left and right edges of the site to be flush with the edges of the browser. Its about 20px of unwanted padding.
Please see my dev site:
http://america.82ndmedia.com/
I have tested removing the "margin: 0 auto" of the container div and it fixes it... however I need that for it to function on a desktop.
.container {
width: $w_total;
margin: 0 auto;
}
Any tips would be greatly appreciated. Thank you!
This is being caused by the rule:
#media (max-width: 450px) {
.header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
.comment, .comment_nav, #commentform, .comment_form_title, .footer {
padding-right: 13px;
padding-left: 13px;
}
Either remove or override this rule somehow.
I'd recommend using percentages instead of pixels because your current setup won't work and is hard to maintain using hardcoded pixels for a responsive design.
For example, you have your main wrapper div class="container" set to a max-width of 717px on smaller screens (which seems random), but inside of it you have elements like id="blog" set to a width of 1020px, which obviously won't fit.
If you set those inner elements to percentages of their outer container, it'll be a lot easier to make it work and it'll be truly responsive or fluid.
Related
I have strange problem with website responsiveness.
When on desktop resolution no horizontal scroll appears at Chrome.
When i resize it to lower resolutions 400px width and less the horizontal scroll appears.
I think some element is forcing width bigger than actuall screen size but i cant find it!
Please help.
Here is website link
I checked your code,
You have to get rid of this code in your footer styles. Your margin-right is making your content overflow.
Try using padding, or something similar instead.
It appears you are using bootstrap for that.. So the best way to do this would be to overwrite this by creating a
#footer > div.row {
margin-right: 0 !important;
}
or if you have bootstrap locally then you can probably delete from there. But i just overwrite it using `!impornat
.row {
/* margin-right: -15px; */
margin-left: -15px;
}
I'm trying to create a sticky footer in bootstrap, and am using the default template provided here: http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
It appears the example provided has a problem; when the page is viewed through a smaller resolution, the navbar collapses (as it should), but then the 60px padding that originally kept the content from hiding under the navbar creates a large gap between the navbar and the content.
Any ideas?
Thanks
One easy way to change this behaviour is to remove the 60px padding when the navbar collapses. Something like this should do the trick:
#media (max-width: 979px) {
#wrap > .container {
padding-top: 0;
}
}
You might have to change the div names to match your naming.
Good luck!
it should maybe be
#push, #footer {
min-height: 60px;
}
instead of just height
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
I have several div Elements below each other in my HTML document:
#quote
#keyword_tree
#sticky_keywords
#stats
I have all of the float: left currently, and it works on a big screen. Within #sticky_keywords, there are also floated elements which correctly break if the page is very small. The problem is that they are only broken into several lines if the wrapper (#sticky_keywords) is already on a line of its own.
How could I get it to break so that it fits next to #keyword_tree without specifying static widths?
big screen
big http://wstaw.org/m/2011/12/17/m48.png
small screen
small screen http://wstaw.org/m/2011/12/17/m49.png.
Perhaps adding a max-width for the #sticky_keywords so that it always fits next to #keyword_tree?
With this, it works pretty good:
#keyword_tree {
float: left;
width: 200px;
}
#sticky_keywords {
overflow: hidden;
margin-left: 240px;
}
So the keyword tree is fixed (it's a compromise) but the other can use all the space there is.
It works in Firefox, IE9 and Opera:
http://wstaw.org/m/2011/12/17/Auswahl_001_.png
But not so very well in Chromium and Chrome and Rekonq:
http://wstaw.org/m/2011/12/17/Auswahl_002.png
I am not sure how it comes up with the extra margin-right.
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.