thank you! Next week I move on to the bottom area below content/sidebar…
so grateful for your help – now you go hiking this weekend!
Hi Paul – I finished it! – http://dev.greensmoothie.com/
your wrapper is only 97% wide which means it is smaller than that image
rather than reduce 310px image, can we make wrapper 100% in iphone? e.g.
@media screen and (max-width:340px){
#wrapper{width:100%;}}
(1) I’m only suggesting this only because I have an h2 problem. I want h2 to emerge from the bgcolor, which it does in my 1024x768 by giving it a margin-left of -3%. But in iphone it seems to want wrapper’s -3% plus the -20px padding-left on Content that holds h2. I tried this but it gets no result:
@media screen and (max-width:340px){
#content h2{padding-left:-20px;}}
(2) In .share the “Email a Friend” button should display inline with the facebook + twitter buttons. How can I stop it from dropping to a new line?
(3) It seems it should be a css image? Like the others. But when I try this, it doesn’t work:
.email{background:url('imgpg/email.png') no-repeat;width:97px;height:23px;display:inline;}
<a class="email" href="mailto:...></a>
(4) How do I tell the last two share buttons (follow & email) that if they drop to a new line in mobile, they must get a top margin of 10px?
(5) In .subscribe at the end I don’t want a table with the image in left cell and header in right cell. It doesn’t work because then I can’t get the <ul> below it to display in the center under img/hdr.
Ideally I’d like a box of text (no table) with an image like this:
.subimg{background:url('imgpg/ovi-w150.jpg') no-repeat left top;}
But again I couldn’t get it to work.
thanks million, Val
Yes you can make the wrapper auto width.
e.g.
@media screen and (max-width:330px){
#wrapper{width:auto}
}
That should let the page get down to 320px ok.
That’s a magic number that you plucked of of the air 
The parent element has 20px of padding so if you want to pull a child element to the edge then it will always be 20px that it needs to be moved and not a percentage.
h2 {
margin: 20px 10px 30px -20px;
}
Try this for the above 2 questions:
.share iframe,
.share a {
display:inline-block;
vertical-align:middle;
margin:0 0 10px;
}
I’m afraid I don’t understand what you are after and I don’t see how changing the box makes any difference anyway. You can move the subscribe box to the center if you want. You mentioned centring the ul underneath but the ul is miles longer anyway so there is nothing really to center.
A picture of what you want may be necessary 
Hi Paul - thanks million! That all works beautifully.
re subscribe box – at the bottom, under “Stay Up To Date” – I’ve uploaded how I’d like it to look - http://dev.greensmoothie.com/
But I need:
-
an image in the top left or right corner that does not display in mobile portrait & landscape (480x320) and in small tablet portrait & landscape (800x600). So it only displays from 801 up. My css image isn’t working (no display at any res).
-
Ditto, up to 800px, I’d like the blockquote before
<ul>to go away. -
I’d like a L/R margin on .btm .awbox from mobile landscape up (480 and above) so it doesn’t hit against the sides of .btm. I’m using “0 auto” to center it, and don’t know how to over-ride the auto. I tried putting it inside another box that has a margin but that doesn’t work (same as .awbox at top of page is inside boxlft).
-
The only problem with “.share iframe” is that it looks chaotic when you disable styles. I don’t know if that’s the iframe or if it’s TW & FB js’s causing it.
thank you! - Val
Hi Val,
I am away until the weekend so can’t look at this again until then.
I didn’t see an image in your page in this section but you should be familiar enough with media queries now to make the image disappear for small screens (if that’s what you wanted). Just set it to display:none the media query at the point you want to hide it.
Then give it a margin at the point it needs one.
e.g.
@media screen and (max-width:700px){
.btm .awbox{margin:0 10px}
}The click to subscribe button is too big and I would split that text into a label and just have the button say ‘Subscribe’ and then a label above that says something like ‘click button below to send My free Classes’.
In that way the button is small and won’y hold the page open at smal widths and the text will of course just wrap like normal text.
Why would you disable styles? The whole page will look chaotic if you disable styles?
Hi Paul - I also went away for 4 days!
I didn’t see an image in your page in this section
It’s “subimg” but it’s not displaying:
css:
.subimg{background:url('imgpg/ovi-w150.jpg') no-repeat right top;}
html:
<h2>Stay Up To Date !</h2>
<div class="subscribe"><div class="subimg"></div>
<p>Treat Yourself to:</p>
I also need the text to wrap round it, the way we did it on the current site, although the “Buy Now” img there is a float:
So the image only displays from 801 up
Is this the correct breakpoint (once I get it to display)?
@media screen and (max-width:800px){
.subimg{display:none;}}
up to 800px, I’d like the blockquote before
<ul>to go away.
I did this and it works:
blockquote{padding:0 40px 10px 30px;}
@media screen and (max-width:800px){
.btm blockquote{padding:0 0 10px;}}
For h2 at different widths, is this correct? I just judged the 51% & 67% by measuring the spaces with a ruler on my screen! The clear in the h2 is for wordpress images – WP uses floats for L/R-aligned images.
h2{clear:both;width:75%;background:#e5ffbf;border-radius:0 20px 20px 0;padding:12px 12px 12px 20px;margin:20px 10px 30px -20px;
font:bold 1.2em Helvetica,sans-serif;color:#e60026;text-align:left;vertical-align:middle;} /*here it's inside wrapper/container/content*/
.btm h2{width:51%;margin-top:0;padding-left:40px;} /*here it's inside wrapper at width:97% & container/content are both closed*/
@media screen and (max-width:330px){
.btm h2{width:67%;}} /*here it's inside wrapper at width:auto & container/content are both closed*/
The whole page will look chaotic if you disable styles?
No the page is very readable & usable without styles. It’s just that twitter/facebook/iframe line that has huge white gaps I’d like it not to have!
“helped by Paul O’B”
What’s your last name so I can write the O’B in full?
thank you! Val
Subimg is an empty element without width or height so there is no background to show. You would need to give the element a width and height to match your image.
If you want the following text to slide up alongside the image then you will need to float the image.
e.g.
.subimg {
background: url('imgpg/ovi-w150.jpg') no-repeat right top;
width: 150px;
height: 93px;
margin:0 20px 20px 0;
}
However I don’t really know what you intend to do with the content that follows and whether it all goes to the side or goes to the side and then wraps underneath. If you want all the text to the side then you will need to put that side content in a div with overflow:hidden set and then all the text will stay to the side of the image and not wrap underneath,
Yes that sounds correct.
Checking the layout with styles disabled is not something you ever need to do as it serves no purpose other than for seeing the structure of a page. You can’t change the facebook buttons anyway as they are injected in an iframe so the point is moot. As you are turning css off then you can’t use css to fix it.
If it does what you want then I guess it is correct
O’Brien is my last name but you could just say helped by SitePoint forums as others have contributed at times.
Hi Paul -
goes to the side and then wraps underneath
Yes that’s what I want. I did this and it seems to work:
.subimg{float:right;background:url('imgpg/cabbage.jpg') no-repeat;width:200px;height:125px;
padding:0 0 10px 10px;}
@media screen and (max-width:800px){
.subimg{display:none;}}
.btm .awbox{clear:right; ... etc}
I’ve got a new problem. A horizontal scroll bar is now displaying at my normal 1024px width.
thanks! - Val - http://dev.greensmoothie.com/
Hey!
It’s because of this rule
.btm {
width: 100%;
max-width: 1200px;
background: #fff;
border-radius: 20px;
margin: 0 auto;
padding: 0 20px 30px;
}
You’re setting it to be 100% width and then on top of that, you add 40px of padding.
You can either remove the width:100% (since a block element like that will automatically expand as much as possible), or add box-sizing:border-box to that .
Thank you! I’ll remove the 100% although I don’t really understand why I can’t give any padding to something that’s 100% wide. I can understand if I can’t give it a margin.
You can give it padding, it’ll just come down to basic math.
To calculate the width of an element, you add the width of the box itself, padding, margin, and borders.
You had 100% width + 40px.
So 100% + 40px is > 100% and that in and of itself is why it created scrollbars. It was wider than the viewport.
Think of padding like you would with margins; why it can’t work.
Ultimately you just need to make sure whatever you are doing doesn’t add up to more than 100%.
Now, if you added box-sizing:border-box, it would actually change up the math on you; it would allow you to set width:100% and whatever padding; and it would calculate it in a way so that the padding wouldn’t ADD to the width, but rather probably what you expect (detract from the content area to make room for padding). If that makes sense 
.
Google “CSS box model”. There should be no less than a zillion references.
Need a desktop reminder? Launch Chrome browser and open the developer’s tools. The box in the lower right corner depicts the fundamental box model. The blue are in the middle represents the content area… the width and height. Padding, then border, then margin add to that width. Unless… as Ryan pointed out, you invoke the {box-sizing:border-box} property.
Recommended reading: https://css-tricks.com/box-sizing/
Thank you! Really interesting link. I think I’ll always just leave out the width:100%. Should I add display:block when I leave out width:100% or will all browsers always know to make the div fill the entire width inside wrapper?
I’ve got 14 @media’s with so many different breakpoints for just one teeny page!
If the element is a block element like a div then you dont; need to declare its display or width.
That says more about your design than the technique
You will need as many media queries as it takes to make your design scale nicely.
If you have a uniform design with distinct columns and similar sized elements then the breakpoints tend to be the same or similar. In your case you just have elements spread around without a coherent structure so you will need more media queries as each element will need to change at a different breakpoint to its neighbour.
Part of the design process is to try and standardise some things so that you need less code but if the design calls for disparate elements then you need more media queries to accommodate them.
Ah well, I never did get properly socialized or standardized… thanks to the hippies in London liberating me from little boxes made of ticky-tacky
how cool is the design of this page:
especially their drop-down menu in mobile. They must’ve paid a fortune for design + programming.
I guess their mobile dropdown wouldn’t work for my 50 links but it looks hot anyway…
Now I’m off to create the next div for google adsense which I’ve read is not mobile responsive but hopefully the div will make it so. After all, if you can tame a banner into fluidity inside a div, why not google?
Not sure I like that.
The dropdown is clunky and not very smooth. The mobile menu is a select element replacing the menu and on the iphone has different styling and triggers the spinning wheel menu which could confuse some users as they may think they are filling in a form.
Hi - below are all my @media’s outside of hamburger menu.
Can I just combine them all at the end, just before css for hamburger starts (so in the css each one is not below the class it applies to, but they’re all bundled together at the end), and:
- have one 330px
- have one 800px (for 810, 780 & 800)
- have one 720px (for 720 & 700)
I don’t want to spend all the time combining them, and then find it doesn’t work!
thanks! - Val
@media screen and (max-width:330px)
@media screen and (max-width:720px)
@media screen and (max-width:810px)
@media screen and (max-width:720px)
@media screen and (max-width:330px)
@media screen and (max-width:780px)
@media screen and (max-width:330px)
@media screen and (max-width:330px)
@media screen and (max-width:800px)
@media screen and (max-width:330px)
@media screen and (max-width:700px)
Yes you can do that if you want and some people take that approach.
The problem I find is that once you remove those rules to the end of the CSS file then if you later make changes to your page you won’t know that you have set media queries for those elements you are editing without continually jumping up and down the css file just to have a look and see if there are media rules applied.
I prefer to keep the rules all together so I can work on them easily and see straight away what needs to be changed. I have never been one for separating out rules into various disparate groups but some people do take that approach so its up to the individual.
If you do merge the media queries then you will need to use the largest size for each group most likely otherwise you will trigger a scrollbar if an element was set to change at 810px but you merged it into 800px.
Thank you! As ever, I’ll do it your way, much to Frank Sinatra’s disapproval. And leave them all as is!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.