When I check my website with Safari browser on smartphone (iPhone) or MacBook, then some elements of my website are wider than the browser window e.g. the body
-tag. I have checked the website with dev-tool and it seems that it begins at a width of 600px and underneath. I dont see this problem in Chrome.
You can see a screenshot here and see that the window has a width of 375px but the body
-tag is 439px wide.
I am applying this CSS-rules because I read this should solve the problem but it isn't for me, unfortunately.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Here is the website I am talking about: http://www.firma-info.no
I hope somebody has an advice for me.
Thanks in advance!
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Using width, max-width and margin: auto; Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
I am testing on Firefox on Desktop in Responsive View
But, I have found that the clouds in the background .x1, .x2 etc.
are causing the window to be larger in width than expected.
This is the case when the clouds are towards the end of their animation.
A Simply overflow: hidden;
to the #page
does the job.
I don't know if this is causing your problem for sure but, it might help anyway.
Also I'd recommend using transforms translate to move the clouds rather than margin inside your animation.
give a overflow-x: hidden on the body tag in css
You can easily fix this by implementing bootstrap or setting the width to a percentage rather than a pixel size.
Bootstrap has special div classes for column size that adjusts with the screen size and is quite easy to implement
I.E.
<div class="col-xs-2 col-sm-2"></div>
<div class="col-sm-8 col-xs-12" align="center" id="content">
you need to implement this in the head tag of your document
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With