Ok got it. Thanks! background-size:75px 100px. Would specify width and height. My default css does not specify size just position and no repeat. So when I change it to background-size:75px. With just one value it would make sense to me that the browser makes both height and width 75px. But when testing it seems that it keeps the relation of heidth to width just scales it down to 75px. So is that what it’s doing? The equivalent of giving inline image just a width value.
Ok I googled…
#One Value
If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.
So it’s like only giving width to inline image
Ok I got another question. Please bear with me - first time thinking in mobile terms for me - learning as I go.
Everything looked perfect on my phone and in the Firefox variable browser add on. But now I notice that each browser renders the width of the text different so each browser has different needed breakpoints at the same width. I assume this is just dif text rendering. Mainly the headings are wrapping before my breakpoint fixes it.
So… is this because one counts scrollbars or something or something I’m not considering? Or do I just simply need to give my breakpoints more breathing room to account for text differences in different browsers and devices?
There should not really be that much difference between browsers. You may get some difference between different OSs if they don’t have the same default fonts installed, but the effect should not be huge.
Another thing that could vary between browsers is if the user has altered the default browser font size in one browser, which they may do. But still a truly responsive site should be able to cope with that.
Do you have an example of this problem to show?
That’s a good lesson to learn early 
because the difference may be due to the size of the font that the user has chosen rather than a browser difference. The idea behind responsive design is to design flexibility into your page rather than rigidity… allowing the text to wrap if necessary is a valid responsive design choice as is fluid-scaling images to fit a fluid container.
In the earliest stages of learning about images and responsive design, you might want to compare the code for scaling background images separately from the code for scaling foreground images.
(ninja’d by Sammo! … make that SammA!)
1 Like
Here is where Im at now. http://bit.ly/2iNICl7. Getting there. Prob too many break points but oh well. Just trying to keep that h1 from wrapping mostly.
Server not found.
“Firefox can’t find the server at (clear text url deleted).”
1 Like
Going by the page you linked earlier, if you think there are too many break points, then there definitely is. That page should not require very many at all. One would maybe do it.
argg sorry that was mamp testing url. Here is live one http://bit.ly/2iM6khw.
Looks like you are adding all those break points to resize the header.
Maybe you would be better off using dynamic units instead of all those queries.
Though for me the header gets too small, I don’t get your aversion to wrapping. How about let it wrap and keep it bigger.
If you don’t like that layout, try something different like forcing the three words to all wrap and centre them.
<h1><a href="/"><span>Daycare</span> <span>Enrollment</span> <span>Forms</span></a></h1>
@media screen and (max-width: 40em) { /* For example */
h1 { text-align: center; }
h1 span { display: block; }
}
3 Likes
I simplified it some. http://bit.ly/2iM6khw. And took your suggestion SamA74. But I used display: table-caption; to wrap the h1 words instead of tags. seems to work well.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.