Brooklyn theme slideshow header dropping from image on smaller screens

Solved
Highlighted
Tourist
10 1 2

Hi,

 

For my website, the slideshow headers looked good on larger screens (white text on a background image). However, on smaller screens, the header text gets stacked under the image and does not look so good. Screenshots attached. 

 

How can I set up a media query so that we show the header text only on screens with a certain width? 

 

 

Screen Shot 2020-02-17 at 12.42.58 AM.pngScreen Shot 2020-02-17 at 12.43.11 AM.png

0 Likes
Highlighted
Shopify Expert
1381 112 211

Please Share a Store url to better assist.

0 Likes
Highlighted
Shopify Expert
3900 559 936

Hi @salman1993 

As i can see you have menu and,logo and cart icon in your header.

I f ou want to hide it in mobile or any width then use this media query

 @media only screen and (max-width: 767px) {
     //Add your code that only affect in mobile view  
  }

you can change 767px to any width that you want, so it will only affect in this given media query.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
10 1 2

Hi, I think you are misunderstanding. I am fine with having the menu, logo and cart in header. 

 

I am talking about the slideshow header text - "The Keya Pullover". If you look at the two images, you will see the text in mobile is no longer on top of the image. I would like to keep it overlayed on the image or completely remove it because it does not look good when it is no longer over the image.

 

Thank you!

0 Likes
Highlighted
Tourist
10 1 2

Store URL ->   https://golapi.co/

0 Likes
Highlighted
Shopify Expert
3900 559 936

I cant see any text on image slider, you are checking on preview link or send me screenshot.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
10 1 2

Can you see the images below? If not, I can send an email.

 

The 1st image is fine since the image text ("The Keya Pullover") appears on top of the image. However, in mobile, as you can see in the 2nd image, the text is below the image and it does not look good. On mobile, I would like either:

(1) the text to still be on top of the image and readjust to a smaller size, or

(2) completely get rid of the text (only for smaller screens)

 

Text on top of image (this is fine)Text on top of image (this is fine)Text below image slider (not what I want)Text below image slider (not what I want)

0 Likes
Highlighted
Shopify Expert
3900 559 936

Add this css in asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) {
       .hero__text-content{display:none !important;}
    }
Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
10 1 2

This is an accepted solution.

It worked, thank you! :) 

0 Likes
New Member
5 0 0

Hi Jasoliya!

I'am writing here, because I have a quit same problem.

Debut/Header/Background image/transparent/Main Menu on mobile view problem

I have changed my header with a background image. Set a background color for transparent.

It does the job fine on desktop ,but when it comes to mobile, then a  main menu wrapper goes below/under a background image. How can I fix it?

Any suggestions?

Thanks in advance

0 Likes