Hide images by device

  • Resolved dfart

    (@dfart)


    6 years, 11 months ago

    I am writing to ask you if you know how to use a code that, depending on the dimensions of the browser from which you enter, shows one image or another.

    The purpose of doing this is for the images to be displayed well in all browsers.

    Thanks for your help.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Media Queries

    Thread Starter dfart

    (@dfart)

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

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

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

    Thread Starter dfart

    (@dfart)

    @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

    Thread Starter dfart

    (@dfart)

    @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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Hide images by device’ is closed to new replies.