- This topic has 5 replies, 2 voices, and was last updated 6 years, 9 months ago by
.
-
Posts
-
I have set the header element and the text overlay, and set the text to float left and be offset so it doesn’t bump into the image in the element – and it’s all good.
But it doesn’t look nice on mobile because the text overlaps the image.
So I would simply like the text not to show on mobile – so there is just the header image and no text overlay.
Can this be done? Did I miss a setting or is there some CSS?
Thank you.
Customer Support
Hi there,
try this CSS:
@media (max-width: 768px) { .inside-page-hero { display: none; } }If you want to apply it to a specific header element then you can add an Element Class in the editor. Then use
.my-custom-class .inside-heroto target that specific hero.Alternatively in your HTML content you can use the
hide-on-mobileclass e.g<p class="hide-on-mobile">You won't see me on mobile</p>Thanks,
Would that element class go in with the CSS so that it reads.my-custom-class .inside-hero @media (max-width: 768px) { .inside-page-hero { display: none; } }Or does the element class
.my-custom-class .inside-herogo in the Element editor in the ‘Element Classes’ ?Taking out the text display on mobile reduces the top-to-bottom height of the element. I expected that and I can live with it, but is there a way to not have it do that?
Thanks
So the CSS would look like this:
@media (max-width: 768px) { .my-custom-class .inside-page-hero { display: none; } }And in the Element Classes you would add just this:
my-custom-class– you don’t add.here.In the header element you have a little mobile icon next to the padding so you could adjust the padding for mobile to accommodate for that change.
Many thanks. (I keep not seeing those little icons.)
Could I name the class
my-big-fat-custom-class(or whatever) as long as I name it the same (with the dot) in the CSS? Or is there something reserved that means it has to be namedmy-custom-classYou can name it whatever you like – best to keep it as original as possible i generally prefix my classes with my initials e.g
db-remove-mobile-contentfor example and then use that with the .dot in your CSS.
- You must be logged in to reply to this topic.
