CODEWITHSUNDEEP
htmlcss
user1951116
user1951116

Reputation: 13

div wont fill 100% width on mobile Chrome/Safari Browser

I'm trying to make a simple website where the header is stretching 100% wide of the browser, then have the content below the header to be 1100px wide centered. This is working perfectly fine on desktop browsers (Chrome, Safari, Firefox). On mobile however there is issues. I haven't done any responsive CSS, but the image in the header should still fill the width of the browser. Here is my code related to this header.

HTML:

<div class="featured" style="background-image:url('image.jpg');" onclick="location.href='#';">
    <div class="featured-details">
        <h2><a href="#">Headline</a></h2>
        <p>Some text goes here</p>
    </div>
</div>

CSS:

.featured {
  width: 100%;
  height: 500px;
  position: relative;
  background-size: cover; 
  background-position:center center; 
  overflow: hidden; 
  cursor: pointer;
  box-sizing: border-box;
  z-index: 100;
}

.featured-details {
  color: #ebebeb;
  bottom: 10px;
  width: 1100px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 150;
}

As you can see it works fine on desktop: http://sistestopp.com/uploads/desktop.png

But on mobile the header isn't 100%: http://sistestopp.com/uploads/mobile.png (the footer is doing the same stuff).

Any suggestions?

Upvotes: 1

Views: 6050

Answers (3)

takid1412
takid1412

Reputation: 356

Your problem is in div.container. Its width is fixed at 1100px. In mobile device has resolution width smaller than that number, browser must scale to show the whole page and then your problem appear. If you add this line to header, you will see it clearly.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

Solution is very simple

.container{
    /*width: 1100px;*/
    max-width: 1100px;
}

Hope this help.

Upvotes: 12

Leo the lion
Leo the lion

Reputation: 3065

As far as i got your point then solution for that. Add this css with background image

background-repeat: no-repeat;
background-size: 100% auto;

and your this class .featured-details should have width:100% or else the heading text will disturb your header image..

chech this screenshot..image Hope i was able to help or else if any issue then let me know..

Thank you :)

Upvotes: 1

Jayababu
Jayababu

Reputation: 1621

Better to use CSS 3 vh and vw here.

width:100vw;

Check more about vh and vw in the below links.

http://www.w3.org/TR/css3-values/#lengths

http://snook.ca/archives/html_and_css/vm-vh-units

Upvotes: 0

Related Questions