Changing the size of a text box on mobile

Solved
Highlighted
Tourist
8 0 0

Afternoon

 

I am new to any form of coding or web design but i have been playing around with a new theme for my store. I have used some youtube videos to work out how to edit the size of a certain text box and i have got that to reduce down to my preferred size however, the size of the text box on the mobile version is remaining the same and this is the one i really need to edit more than anything.

 

This is the change i have made to reduce the size, how do i change/set a condition for mobile now?

 

Box size.JPG

Any help would be much appreciated

 

Thanks in advance

0 Likes
Shopify Partner
84 16 20

Hello @Billy-Reviver 

 

Can you please share your store link so i can check and help you :)

 

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com
Skype: parthbhut7

1 Like
Tourist
8 0 0

Hi Parth

 

Thanks for the reply. This isnt my current theme so its offline...should i change the theme temporarily so that you can see it?

0 Likes
Shopify Partner
84 16 20

Hello @Billy-Reviver 

 

If possible please change it or you can share preview link for non published theme also 

0 Likes
Tourist
8 0 0

@ParthBhut 

 

thank you ive now changed it

 

https://www.reviver.co.uk/

 

the box in question is the "Shop" box in the slider on the home screen. Also is it possible for me to remove the box that says 1/2?

 

thanks so much for the help

 

button.JPG

0 Likes
Shopify Partner
84 16 20

Hello @Billy-Reviver 

 

For remove that 1/2 box you need to add below CSS code at bottom of your css file : theme.scss.liquid

 

.hero-content__controls-item--count{display:none!important;}
1 Like
Tourist
8 0 0

@ParthBhut thank you for that.

 

Any ideas on the original issue with the text box being shrunk for mobile? thank you so much

 

0 Likes
Shopify Partner
84 16 20

Hello @Billy-Reviver 

 

I got confused which text box can you share screenshot please

 

Thanks

0 Likes
Tourist
8 0 0

The Blue one in the photo above. That we corrected the other issue on.

 

Thanks @ParthBhut 

0 Likes

Success.

Shopify Partner
84 16 20

add this css code to make that font smaller on mobile screen

 

@media only screen and (max-width: 767px) {
.hero-content__title{font-size:1.7em!important;}
}

Thanks

1 Like