Brooklyn theme slideshow header dropping from image on smaller screens

Solved
Highlighted
Tourist
9 1 0

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
1342 111 181

Please Share a Store url to better assist.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Shopify Expert
2930 499 671

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
9 1 0

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
9 1 0

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

0 Likes
Highlighted
Shopify Expert
2930 499 671

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
9 1 0

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
2930 499 671

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Success.

Tourist
9 1 0

It worked, thank you! :) 

0 Likes