Hello and thank you,
I've seen a lot on horizontal spacers, but specifically, I am trying to put a padding space between the main body text and the left menu bar of this site.
Adding margin-left or padding does not seem to work. On desktop it looks great, but on mobile, the text never resizes to "fulls screen" length.
Any help would be great :) Thanks.
It looks like everything is fixed-width... from your sidebar to your >200px margins. Generally this is frowned upon because it causes tons of issues with smaller devices, and as #Tanckom suggested, you should probably look into restructuring the page with CSS grids.
This means that, without a major overhaul of the style sheet and structure, there's no quick and dirty solution that will make this page look good on mobile.
Here are a few steps you could take to chip away at a more responsive page design:
Add the following meta tag in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to make the page width take the full width of the viewing device.
Look into CSS Grids or CSS Flexbox as alternative methods of structuring your page. These carry the benefits of staying away from large fixed numbers (such as margins of over 200px), and are more easily manipulated when the screen size changes.
Look into CSS Media Queries, and see how you could use them to change your site's styling depending on screen size. One such media query might look like:
#media screen and (max-width:600px) {
#sidebar_container {
width:100%; /* or something like that */
}
}
Related
I've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
I have a website using a huge background image (2000x1500) in a div container (100% x 100%).
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting "hidden". Exactly the same happens.
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
Adding this worked for me when I had a background image on the background canvas...
body{ -webkit-background-size: 2000px 1400px;}
Obviously one has to replace the dimensions with the correct size for the image.
You should definitely create a separate stylesheet for the iPad.
You can use the following to do so:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
Let me know how it goes.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
It seems that this issue only occurs on the iPad when you have a background image that is attached the the <body> tag. If you place the background image into a containing div, the issue can be resolved -- this is a great work-around if you don't need to have your background image "fixed", as the techniques to make background fixed work in IE mandate that you use the <body> tag for images.
You can see the difference in these two sites, the first uses the <body> tag for positioning (due to the fixed positioning on the background image) and the second uses a containing div:
http://www.mricsi.com
http://www.collinshirsch.com
Hope that helps!
edit -- this is not entirely accurate -- it seems like this is the case only some of the time, and the reason behind why is unclear.
I've got a 5400x556 as a (scrolling) background image in a div. As a .jpg it gets scaled down drastically, as a .png it's fine. The only trouble now is the .png is 5 megs. Grr.
Good call on the separate stylesheets though.
good luck
owen
I use:
body {min-width:2000px; min-height:1500px }
You can use the solution of #UXdesigner to create a seperated stylesheet for iPad. But you can use a single statement in your current stylesheet:
#media only screen and (max-device-width: 1024px){
.yourClassname{
max-width: 500px;
}
}
and of course for smaller devices like phones you can use:
#media only screen and (max-device-width: 480px){
.yourClassname{
max-width: 100px;
}
}
Note that these suggestions only work in CSS3 (the latest devices all accept this)