CODEWITHSUNDEEP
htmlcss
dahlsdata-tahira
dahlsdata-tahira

Reputation: 359

Elements wider than window - 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!

Upvotes: 17

Views: 3191

Answers (3)

ashfaqrafi
ashfaqrafi

Reputation: 500

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

Upvotes: 2

Jacob Langreck
Jacob Langreck

Reputation: 61

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>

Upvotes: 1

Type-Style
Type-Style

Reputation: 1831

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.

Upvotes: 17

Related Questions