- This topic has 9 replies, 3 voices, and was last updated 1 year, 6 months ago by
David.
-
AuthorPosts
-
August 9, 2019 at 11:15 am #980193
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!
August 9, 2019 at 11:35 am #980213Leo
StaffCustomer SupportHi 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-classesLet me know if this helps 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 10, 2019 at 11:24 am #980842patricia
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;
}>August 10, 2019 at 2:10 pm #980924Leo
StaffCustomer SupportNot quite sure if I fully understand.
So you are trying to change the breakpoint of where the image switch?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 11, 2019 at 12:07 am #981084patricia
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
August 11, 2019 at 5:16 am #981203David
StaffCustomer SupportHi 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 11, 2019 at 5:23 am #981205patricia
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
August 11, 2019 at 5:39 am #981214David
StaffCustomer SupportAah 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 11, 2019 at 11:12 pm #981743patricia
thank you David, that works perfectly!! <3
August 12, 2019 at 3:15 am #981837David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.