[Resolved] discriminate a different header from "Elements" on desktop and mobile

[Patricia]

Hello!

Is it posible with the “Elements” feature to place a header only for desktop/mobile? if it is, how?

I want to place a title and an image on the frontpage of my blog, which i already did placing a header but it is not very well displayed on mobile so i want to place a different image just for mobile

Thanks!

[Leo]

Hi there,

Looks like you are referring to static images so you can insert 2 images and just use the built-in hide-on classes:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps 🙂

[Patricia]

hello!

it worked perfectly, but y need to change the responsive breakpoints for tablet, just for this, not for the rest of the site…

what code should i use?

i’ve tried as follows but it does not work (sorry i know almost nothing about CSS:

<div @media (min-width: 1025px) {
display: none;
}>

[Leo]

Not quite sure if I fully understand.

So you are trying to change the breakpoint of where the image switch?

[Patricia]

hello again Leo

yes, for example mobile until 449px, tablet from 450px to 799px and desktop from there

but just for this, not for the rest of the settings of the template

is it possible?

thanks

[David]

Hi there,

to change out the background image would require some CSS like so:

@media (max-width: 450px) {
    .my-hero-custom-class {
        background-image: url(full_url_to_image/image.jpg);
    }
}

Give the header an Element class of my-hero-custom-class or whatever you want to name it to target that one specifically.

[Patricia]

hi David! it’s not the background image..it’s a “banner” image I set on my homepage. you can see it here: https://trucosyastucias.com/

thaths the image https://trucosyastucias.com/wp-content/uploads/2019/06/trucos-y-astucias-tienda-online-artesanias-regalos.jpg

should i put “Background-image” anyways??

thanks

[David]

Aah sorry my bad for not reading the topic….

So you can create your own custom classes for that purpose:

@media (max-width: 449px) {
    .custom-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 450px) and (max-width: 799px) {
    .custom-hide-tablet {
        display: none !important; 
    }
}
@media (min-width: 800px) {
    .custom-hide-desktop {
        display: none !important;
    }
}

Now you can use custom-hide-mobile etc. in place of the GP included classes.

[Patricia]

thank you David, that works perfectly!! <3

[David]

Glad we could be of help

[Author]

Posts