I've had this problem in the past but at the moment i am unable to find the right fix.
We built this huge site over a year ago. At the time RWD was not even considered and it was out of scope.
Now, there are some minor issues the client want us to look into, so that the site doesn't look as bad on mobile devices.
The site in question is www.bombardier.com ( preview using a mobile device ). Basically the main thing that needs fixing is the backgrounds not covering 100% of the screen. They, correctly stay at would be the normal screen size, but because the content is much wider and not responsive, the page appears much larger while the main backgrounds ( body, header and footer ) appear to be cut short.
Any suggestions on how to make this look nicer ?
Thx.
Because your site has a fixed width of 960px all you need to do is add...
body {
min-width: 960px;
}
... this will prevent the body from shrinking down the the viewport width and cutting off you background on small screens.
Related
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I am using one css design and it works perfectly in full size browser but whenever screen size is reduced below 1280 px in width scroll bar goes missing and responsiveness in design gets frozen to that frame so user can not view complete site, can not scroll when on mobile devices or after reducing browser screen size. Request to please help with that. Below is the link to site where this problem is occurring
http://goo.gl/VzVmTW
You are setting your body overflow to hidden, once it gets to a specific width, so once you need the scroll, as soon as the browser renders your CSS, it will assume the overflow:hidden attribute thus removing your scrolling capabilities.
This happens on line 315 of your irms_default.css:
#media screen and (min-width:0px) and (max-width:1180px){
body{overflow:hidden;text-align:center;}
If you really need to apply a hidden overflow, try applying it only to the elements that need it to prevent such issues. A 'body' with a hidden overflow should exist only on static single page designs, to ensure the best of the user's experience.
I have this photo site that I am noodling with and I have an issue with reactive sizing of the browser window. The images look great at 100%, but when I size down the window the landscape images start to resize, which I understand they are sizing down to meet the width of the browser window.
However when I get really small, to mimic a smartphone, I really want these images to stack, as this makes more sense for images that are portrait. So the idea is to go from left to right and then top to bottom when the browser is small. Im kinda rusty at css and I cant remember how to get this done. Can someone please help a brutha out and point me in the right direction so I can get this going? Im doing this all thru my WP override option, so an approach I should follow with just css would be the best, as Im a tard with anything more complex.
the site is here: http://jadanduffinphotography.com/
Thanks!
-Jadan
What I suggest for you to do is:
write css to make the images float: left; and position: relative;inside a container div
detect the orientation of the browser window
according to the orientation, set the width of the container div
This should make the images display horizontally when possible and make them stack vertically when not.
You should take a look at this too probably.
This is good. Don't know what's actually bothering you with the responsive layout but so far your site works great.
If you still do not want that resize/layout on smaller device do remove/edit between lines #7201 - #7509 on this file http://jadanduffinphotography.com/wp-content/themes/heat/style.css
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.
I have looked at many different peoples answers to this problem but they only account for one image.
I am having a problem with the the two images that i have placed in my header, when i resize my browser i want them to scale down with it so that they dont displace my whole site.
i have it hosted in dropbox so you can see what my problem is: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html
also another problem im having is un attaching the footer from the bottom of the screen and putting it below the body so users have to scroll down.
p.s I attached the footer to the bottom many months ago and I forgot how to undo it.
SORRY FOR THE TERRIBLY MESSY CODE
thanks in advance
Arran, 16
Here's how I'd do it. First, style each image using CSS to have width:100% and height:auto. This makes them respond to the sizes of their containers. Lose those width and height attributes from the img tag - I'm not even sure if those are valid anymore.
Now here's where the clever part comes. Your images are 550px and 298px wide, which is roughly a 65%:35% ratio. When the header is at its most narrow point before breaking, it's about as wide as the sum of the two. So give the big image's container max-width:65%, and the small image's container div max-width:35%.
This way, when the browser window is smaller, the images scale down correspondingly - and don't become larger than they need to be when the window is wide. I tried it out on your page, and I think it worked - see if it works for you. :)