CODEWITHSUNDEEP
htmlcss
Amit Jugran
Amit Jugran

Reputation: 11

Hide image on mobile

I have this html tag to put an arbitrary image on a page. 

<a href="example.com"><img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" /></a>

However, I dont want this image on mobile. Can this be done?

Upvotes: 0

Views: 4105

Answers (2)

saleh katebi
saleh katebi

Reputation: 71

It is better to be mobile first. select class for your image. for example hide-mobile. then write these codes:

.hide-mobile
{
    display: none;
}
@media only screen and (min-width: 500px) {
    .hide-mobile
    {
        display: block;
    }
}

Upvotes: 1

jstarick
jstarick

Reputation: 140

You should take a look at media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

To hide the image, you would need a media query with display:none, which is only included on a low resolution.

@media only screen and (max-width: 500px) {
    img {
       display: none;
    }
}

EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.

Upvotes: 0

Related Questions