Fredd Posted October 6, 2011 Share Posted October 6, 2011 I have a few issues with my website at the moment. Whenever people use browser zoom on my website, the background zooms along, while the background has to always stay the same. body {background-image: url(background.jpg);} And beside this, how would it be possible to make the font automatically adjust in size towards the size of the browser window? I currently draw most of the things on my website with CSS3 code. I give them percentage values so they automatically size along, this all goes well. However, if I give font a percentage value, it does not really do the same. Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2011 Share Posted October 6, 2011 You can't do anything to stop the images from increasing size, browsers zoom images just in case the user wants to see the image closer up. Percentages in font values are relative to the size of the font in the parent element. These are browser settings that can't be modified. Maybe you need to re-think your design. I don't think either of the two things you asked for are necessary for a decent site design. Link to comment Share on other sites More sharing options...
Fredd Posted October 6, 2011 Author Share Posted October 6, 2011 If I apply a percentage to the background size, it remains the same all the time, yet, I have not found how to make it perfect when using percentages. The thing is, my background is a repeating noisy texture. If it is zoomed in on it looks very ugly and pixels become visible obviously. As for the text size, it looks fine on desktop browsers, but on mobile phones they are overly large, yet my website design adjusts just fine due to the fact I specified everything with percentages, just the text remains problematic. How can I rethink my design to make the text look both good on mobile phones and web browsers, without creating a mobile site version? Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2011 Share Posted October 6, 2011 Have you tried using EM on all your font sizes? Usually on the body element I set the font to 62.5%. From there on, in normal browsers 1em is approximately 10 pixels, 1.4em would be 14pixels. Mobile devices will probably have appropriate sizes for their screens when printing those. Also remember that "em" font sizes are relative to the parent. if you have the font size as 1.2em in one element and in a child element you also have 1.2 you will have 1.2 * 1.2 which is 1.44 relative to the default font size of your page. Link to comment Share on other sites More sharing options...
Fredd Posted October 6, 2011 Author Share Posted October 6, 2011 I tried out different measurements and looked up the best measurement to use, but I have not really found out any fitting solution. I will continue to try using the em unit to make it fit on mobile devices. Link to comment Share on other sites More sharing options...
Fredd Posted October 7, 2011 Author Share Posted October 7, 2011 Well, it did not really work out, the result is the same. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.