Remove sub header and header from mobile view

Technical Q&A

Topic summary

A user working with the Prestige theme is attempting to hide header and subheader text elements on mobile devices (screens under 600px wide).

Issue:

  • CSS code targeting .carousel-caption and button elements isn’t working when added to theme.css
  • Also tried targeting hero section elements (.hero__slide, .hero__cat, .hero--adapt, .hero__cat, .hero__subtitle) with display: none without success

Current Status:

  • The post includes a screenshot showing the problematic mobile view
  • No solutions or responses have been provided yet
  • The discussion remains open with the technical issue unresolved
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello! How do I remove the text on mobile version? I’ve tried these, but they don’t work for me. I tried to paste it in theme.css.

@media screen and (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}

.button {
display: none; /* Hide the button when the screen is less than 600 pixels wide */
}

@media screen and (max-width: 600px) {
.hero__slide a.hero__cta, .hero–adapt a.hero__cta, .hero__subtitle {
display: none;
}

I use the theme Prestige. Check the image below if I’m not making sense :slightly_smiling_face:

joraab_0-1668714704084.png
joraab_0-1668714704084.png373×202 55.4 KB