Jump to content

headerwrap not responsive


rafael3333
 Share

Recommended Posts

I use this bootstrap theme, and all the webpage shown fine, but the headerwrap is not working. the css code #headerwrap { background: url(../img/header-bg2.jpg) no-repeat center top; margin-top: -10px; padding-top: 20px; text-align: center; background-attachment: relative; background-position: center center; min-height: 750px; width: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}the html code : <!-- MAIN IMAGE SECTION --><div id="headerwrap"><div class="container"><div class="row"><div class="col-lg-8 col-lg-offset-2"><h3>Mimy Fuentes Photography</h3><h5>Images for emotions and smiles!</h5><div class="spacer"></div><a href="#portfolio"><i class="fa fa-angle-down"></i></a></div></div><!-- row --></div><!-- /container --></div><!-- /headerwrap --tThanks you !!

post-177826-0-35035500-1416156263_thumb.jpg

Link to comment
Share on other sites

It will only shrink to the largest/longest word in h3 header tag, you either use media queries to reduce font-size at specific widths, OR use new 'vw' unit for font-size, font-size: 27vw; (27% of viewport width), but this is not supported fully in all modern browsers.

 

Just to point out, when 62.5% is used for font-size: 62.5%; its size is not determined by container width it is in, but the actually font-size defined, if no font-size is set it will default to 16px, so font-size: 62.5%; will adjust this default 16px font to a 10px font.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Just to point out that background-size: 100%; becomes background-size: 100% auto;, which give same effect as background-size: cover;

 

background-size: cover; = fit the whole image in width or height wise until area is filled by image background, but is kept proportionally correct, meaning if area is not the same proportionally, part of image will be hidden.

background-size: 100% 100%; means background image will fit area entirely, but may not be proportionally correct.

background-size: contain; image will fit in area proportionally without stretching to fill the whole area.

Link to comment
Share on other sites

You have to choose between

background-size: 100% 100% whole image fit when resized but distorted.

background-size: cover; whole image will be seen, but it won't fit total area of its parent container.

 

Definitely will have to have the text shrink using vw, or adjust size for different widths which i think might be more difficult.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...