Hide images by device

Media Queries

@jaycbrf I’m sorry, I do not understand what you want to tell me

@dfart Please do not create multiple topics for the same thing. I’ve archived your latest topic.

@jdembowski I’m sorry, it’s an important issue and I wanted to solve it as soon as possible and even though I say I can not go to the developer of the subject, it’s what they respond to me.

• This reply was modified 6 years, 11 months ago by dfart.

Hi @dfart

Every website is made up of three different components (HTML, CSS & JavaScript).

1. HTML allows to display Text in Webpage.
2. CSS (Cascading style sheet) allows to design every component in webpage.
3. JavaScript adds various functionality and makes webpage interactive.

In order to show different images and layout according to the user’s screen dimension you can use Media Queries.

Media Queries is module of CSS which helps us to define styling rules for webpage components according to users’s screen dimension.
For example
the header image of website is breaking for iPhone user so I will add a media query for iPhone users.

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
{
    .headerimg {
        background-image:url("wp-content/uploads/2017/12/small-header.jpg");
    }
}

for more details regarding Media Query you can refer below URL
https: //www.w3schools.com/cssref/css3_pr_mediaquery.asp
https: //www.w3schools.com/css/css_rwd_mediaqueries.asp

@ratneshsonar Thank you. And that should put it on the page with the link to the image I want or would I have to put it in the style.css file? I do not have a lot of experience with these topics, which is why I find it difficult to understand this topic.

CSS always goes in the stylesheet. BUT BEWARE> if you make changes to the theme’s files they will be overwritten when the theme updates.

Media Queries also need to be added after any other references to the css selectors inside the media query. CSS rules are overwritten by rules that are placed later in the css file.

For example:
.headerimg {background-color: #000; } <- this rule would be ignored
.headerimg {background-color: #F00; }

Hi @dfart
apologies for delayed reply
You can add media queries to you external CSS of your theme. Go to Appearance > Customize > Additional CSS.

now paste your media queries in the additional CSS section and hit the Publish Button on the top right side of the additional CSS section.

CSS code added in Additional CSS section wont fade away even if you update your theme.

Hope that helps,
Regards,
Ratnesh