0

I'm trying to make my website responsive. I found on this website (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/) that to be able to make images flexible, you have to use max-width: 100%.

Which I did on my website (http://riksblog.com/Marnik/index.html) for #promo1img (the first iphone image) but as you can see, it's not working as it should.

Which css-styles am I missing?

Marnik Bruyndonckx
  • 69
  • 1
  • 7
  • Remove `min-height: auto` from `section.first` class and add `height:auto`. As for mobile screen sizes, your image is responsive but `h1` and `.contactemailp` are not. – yakutsa Jul 01 '15 at 13:17
  • Do I need to add height:auto to section.first or #promo1img ? Regarding making h1 and .contactemailp responsive, I found on this question (http://stackoverflow.com/questions/25403510/bootstrap-3-responsive-h1-tag) that I should use: h1{ word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } Is that a right solution? – Marnik Bruyndonckx Jul 01 '15 at 13:23

1 Answers1

0

Change your section.first class to below: (line 110, in stijl css file):

  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  background-image: url(../img/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

The above code fixes the background cover image.

Now there are other elements in the html that are not responsive. So for those, add this codes to your css:

@media screen and (max-width: 480px){
    #contactemailp{
        margin-left:0px;
    }
    section.first .section-content .section-content-inner h1 {
        font-size: 40px;
    }
}
yakutsa
  • 642
  • 3
  • 13
  • Thank you for the solution, yakutsa. I'm using a few other images, to make them responsive/flexible, I should add the same style like the section.first? So width: 100%; and height: auto; to get them flexible and resize? – Marnik Bruyndonckx Jul 01 '15 at 13:42
  • @MarnikBruyndonckx, make sure that the width of the surronded div of your image is `width:100%` and give the `img` class `width:100%`. That way, you won't see any flow all screen sizes. – yakutsa Jul 01 '15 at 13:46
  • For some reason, the image is really huge, it's like it expands a lot over the whole body when using width: 100%. For example the first iphone mockup is called #promo1img and the surrounded div is called section.promote1. CSS styles: section.promote1 { margin-top: 0; background-color: #f4f4f4; width: 100% } and #promo1img { float: right; width: 100%; margin-right: 200px; } the image is now spread over the whole body with very bad resolution, it's like it's zooming in instead of using the original height and width of the image – Marnik Bruyndonckx Jul 01 '15 at 13:52
  • @MarnikBruyndonckx, I see your point. Then inside of your `@media screen and (max-width: 480px)` code, change the class `#promo1img` your `height:auto` to `height:270px`. It should re-size your image without any distort. – yakutsa Jul 01 '15 at 13:55