Media query for Custom HTML code Blocks responsive for mobile

Highlighted
Tourist
11 0 2

Hi,

 

On my site, I've managed to get three images equally spaced apart with text centered underneath using a custom HTML block.

however, when this is switch to mobile they are all squashed together instead of stacking.

How do I get them to stack? I've added a media query code to the theme.scss but it's still not working, not sure what I need to do.

Thanks Nisa

 

0 Likes
Highlighted
Excursionist
177 45 53

Hi, @iMendez 

Thanks For the post.
Please share your site URL,
So I will check and provide a solution here.

Thank you.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
11 0 2
Highlighted
Shopify Partner
55 9 11

Hi, I just saw your html structure, you are using inline-css, 

You need to add some classes to it so you can control them with media queries. 

Screenshot 2020-06-21 at 2.28.08 PM.png

Once you added classes you can control them with media queries easily.

@media screen and (max-width:768px){
.yourclassname {
width:100%!important;
}
}



If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
Tourist
11 0 2

thank you Robin,

 

is what you’ve shown me the classes added?

if not where do I add them within the html structure. 
mum very new to code. 

Cheers 

0 Likes
Highlighted
Shopify Partner
55 9 11

I see, 

You have to change the following line : 

<div style="width: 33.3%; padding-left: 32px; padding-right: 32px;">

with 

<div class="yourclassname" style="width: 33.3%; padding-left: 32px; padding-right: 32px;">

include class.

and then you need to add style, which I referred you

<style type="text/css">
@media
screen and (max-width:768px){ .yourclassname {width:100%!important; } }
</style>

 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
1 Like
Highlighted
Tourist
11 0 2

its coming up like this now, id like it stacked in mobile view? do i need to add three media queries? and three different classnames?

Screen Shot 2020-06-21 at 20.46.28.png

0 Likes
Highlighted
Shopify Partner
55 9 11

its not showing anymore, did you added custom-banner class to it?

 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
Tourist
11 0 2

@robin_ca  Yes I added that as the class. 
it was showing them stacked last night but had code text around it, as I added some extra code. 
just need to remove that and centralise it all 
0CBCC4FB-CDD3-4CB0-A585-CDCC42CB1A2F.png

 

0 Likes
Highlighted
Tourist
11 0 2

ive managed to stack them, but now they are constantly stacked for desktop also.

where have i gone wrong with the code?

Screen Shot 2020-06-22 at 07.25.58.png

 

 

this is the CSS code ive used.

 

<style type="text/css">

.custom-banner {
position: relative;
width: 100%;
height: auto;
text-align: center;}


@media screen and (max-width:768px){
.custom-banner {width:100%!important;

 

Ive tried removing the top part of the CSS but still no luck..

 

Thanks for your help so far @robin_ca , I really appreciate it
}

</style>

 

 

0 Likes