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.
Related
I made this single web page and when I view it my mobile device, and I thumb to the left, the width of the website shifts over slightly, like the left and right edges are not completely contained within the device screen. It doesn't shift around on the DuckDuckGo browser, but it does on Safari. Is anyone aware of how to correct this?
I've used Bootstrap Grid and tried to set the correct element width specifications with CSS.
i think it's about the width of you div with the ID "spinningDial".
She's to big on small device.
Remove it for a test. Then the page width will be perfect on mobile device.
Or you can juste try to change the width of this div for a test (100px for example).
Thanks for the help, everyone. I changed the width of the spinning image and everything seems to be working. I had also forgotten that the corners of the transparent div extend further than the circle... whoops.
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.
This site I've built at http://www.bridetobe.co.uk/ is doing something odd when I try and view it on a mobile device. I'm using some media queries to make it responsive and what happens when I view on a mobile #sitehead seems to be covering up most of #homepage_slider below(see image below).
From looking at the CSS on #homepage_slider I don't see any absolute positioning making it be in a particular place in this instance.
Does anyone know how I can make #homepage_slider position itself below #sitehead rather than behind it?
Thanks
#sitehead is position fixed so you either need padding at the top of the body (matching the height of your header) to push you slider down or not have your header fixed (make it relative). It works on the desktop as your sitehead is relative.
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
All,
I am writing the CSS for our web application. The whole application needs to fit in the browser window without any scrollbars appearing. I also want to set a min-height & min-width properties so that if the browser window gets smaller than our min., only then will the scroll bars appear.
Is there a way of achieving this in CSS please?
Your problem depends to the screen size of the viewers, which may varies greatly. My propose is that you should create a fix width/height div which is the wrapper of all the content (usually 1024x768).