Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Elements wider than window - CSS

Tags:

html

css

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.

Screenshot

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!

like image 770
dahlsdata-tahira Avatar asked Feb 08 '17 08:02

dahlsdata-tahira


People also ask

How do I fix the size of an element in CSS?

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.

How do I reduce the size of a container in CSS?

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.

How do I make div width equal content?

Using inline-block property: Use display: inline-block property to set a div size according to its content.


3 Answers

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.

like image 158
Type-Style Avatar answered Sep 19 '22 14:09

Type-Style


give a overflow-x: hidden on the body tag in css

like image 40
ashfaqrafi Avatar answered Sep 20 '22 14:09

ashfaqrafi


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>
like image 44
Jacob Langreck Avatar answered Sep 20 '22 14:09

Jacob Langreck