CODEWITHSUNDEEP
htmlcss
sedrick
sedrick

Reputation: 211

HTML: Image becomes very small on mobile

I'm having trouble because the image becomes really small on mobile (or when I zoom in a lot in the browser). Why does this happen and how do I fix it? My HTML and CSS are below:

HTML

<section id = "s" class = "s-section">
<div class = "center">
    <h1> Title Title Title Title Title  </h1>
    <img src = "img/hands01.jpeg" width = 50% max-width = 200% object-fit = cover class = "float-left" padding-right = "2">
    <div class = "s-paragraph">
        <p> Insert text here askdjfalksdflksa dflkasj dflkasj dlkf asdlkfj aslkdfj alskd flkas jdjflkas dlkf asdlkdf lakss dflkas sdflkas dlkf aslkdf lkask dflkas dsflk aslsdfaslkdf jaslkdfj lkasdj flkasj dflkas dlkfaslkdkf lksadj flkas dflkasj dlkf aslkdf asklsdjf lksaj jdflkas dlfkas lskdf aslkd fslkd lkasd flkasd jl</p>
    </div>
    <br>
</div>

CSS

.s-section {
  padding-top:8rem; 
  padding-bottom:5rem; 
  background:#ef9000;
}

.float-left {
  float: left;
  margin: 4px;
  padding-right: 2rem;
}

.s-paragraph {
  padding-top: 1rem;
}

.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}

Regular Version

Mobile Version

Upvotes: 3

Views: 3715

Answers (3)

TKD21
TKD21

Reputation: 283

If you are new to Web Design and Development, I'd suggest to first read up on what media queries are here and here. Then, when you've gotten at least a basic understanding of media queries, move on to grid systems in CSS.

Once you have acquired all that knowledge, you will want to start building stuff with it - mobile responsive web stuff

If you are afraid of frameworks, try this grid-system only

If you are brave or have worked a bit with web frameworks before, you can move on to Bootstrap's Grid System

A commonly-used example of Bootstrap looks like this:

<div class="container">
    <div class="row">
        <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
         <div class="col">
            // Your content goes here
        </div>
    </div>
</div>

Where the <div class="col"></div> element has different variations for different viewports - a few examples - col-sm-2, col-lg-4, col-xl-12, where the letters after "col-" refer to the size of the viewport and the numbers after that refer to the amount of grid columns taken in the viewport

Upvotes: 1

Julian Silvestri
Julian Silvestri

Reputation: 2027

Instead of using the % for width try defining them using a pixel count and then using media queries as @Denys Brustovskyi mentioned

<img src = "img/hands01.jpeg" width = 50% max-width = 200% object-fit = cover class = "float-left" padding-right = "2">

Like so:

<img src = "img/hands01.jpeg" width = 200px max-width = 400px object-fit = cover class = "float-left" padding-right = "2">

You can also try using the css:

.className {
background: url('filepathForPhoto.jpg');
background-size: cover;
width: 200px;
}

Upvotes: 0

user7781483
user7781483

Reputation:

Maybe you should use media queries?

Example: 

body{
  padding: 0;
  margin: 0;
}

@media only screen and (max-width : 320px) {
   img{
     width: 100%;
     height: auto;
   }
}

http://jsfiddle.net/ypuqfgek/7/

Upvotes: 0

Related Questions