CODEWITHSUNDEEP
cssimageresponsive
Mus Harlem
Mus Harlem

Reputation: 175

Responsive image won't fit mobile screen

I have this little piece of code (a snippet of it). The problem is, that the images will not fit the screen, even though I am using media queries. Can anyone show me how to fix this, to fit the screens? The image I am using is larger than the screen, so it goes way over the screen an forces people to scroll horizontally, which it should not - it should fit the screen automatically.

Here is my code:

.portfolio img {
    max-width: 100%;
    width: 100%;
    height: auto !important;
}


@media only screen and (min-width: 1025px)
{
	#myBackground
	{
		min-height: 1000px;
	}
	
	#produkter
	{
		min-height: 1000px;
	}
	.portfolio img {
        max-width: 440px;
        max-height: 440px;
    }
	
}

@media only screen and (max-width: 1024px)
{
	#myBackground
	{
		min-height: 800px;
	}
	
	#produkter
	{
		min-height: 800px;
	}
	.portfolio img {
        max-width: 300px;
        max-height: 300px;
    }
	
	
}

@media only screen and (max-width: 640px)
{
	#myBackground
	{
		min-height: 600px;
	}
	
	#produkter
	{
		min-height: 600px;
	}
	.portfolio img {
        max-width: 240px;
        max-height: 240px;
    }
	
	
}

@media only screen and (max-width: 368px)
{
	#myBackground
	{
		min-height: 500px;
	}
	
	#produkter
	{
		min-height: 500px;
	}
	.portfolio img {
        max-width: 100px;
        max-height: 100px;
    }
	
	
}
<head>
  <meta name="viewport" content="width=device-width">
</head>

<body>
<img class="portfolio" src="images/bock1.png"/>
</body>

Upvotes: 2

Views: 6269

Answers (2)

David Wilkinson
David Wilkinson

Reputation: 5118

You should rewrite your CSS, as the following won't target your image:

.portfolio img {}

The browser will instead try to style an image within a parent element with a class of portfolio

You should either rewrite your CSS as follows:

img.portfolio {}

The above will target your image, which currently has a class of portfolio.

Or wrap the image in an element with a class of portfolio:

<div class="portfolio">
    <img src="">
</div>

In which case your existing CSS will then target your image.

Upvotes: 0

pegla
pegla

Reputation: 1866

Your problem is that portfolio class is on image, and in code you have .portfolio img which means that image is in div that has class portfolio, try this:

 <div class="portfolio">

    <img class="portfolio_img" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"/>

    </div>

Just remove class portfolio from image and wrap image in div that has class portfolio, other solution would be to put in your css

body .portfolio

instead 

.portfolio img

Upvotes: 1

Related Questions