Liquid, JavaScript, themes, sales channels
Hello guys! I am using Brookly Theme and I am wondering how can I make this section responsive on mobile as well,on deskop it's look nice,but on mobile the photos are one next to each other and I want them one photo under the other when I change desktop screen to mobile screen.Did anyone know what can I do? I need to mention I've added this section in slideshow.liquid under the slide section.
Solved! Go to the solution
This is an accepted solution.
please insert this code end of theme.scss.liquid file
Follow this : Online Store >> Themes >> Actions >> Edit code >> Assets >> theme.scss.liquid
please make 'm' letter lowercase
@_media only screen and (max-width: 600px) {
.box {
width: 100% !important;
}
This is an accepted solution.
please share your site url so that i check it
I forgot to mention the code for the section I've create:
.box {
float: left;
width: 33.3%;
padding: 50px;
text-align:center;
}
.iconbox {
display: inline-block;
font-size: 15px;
color: #fff;
background: #fff;
padding: 0;
border: none;
cursor: pointer;
}
.bg-light {
background: #fff;
color: #333;
}
.bg-primary {
background: #fff;
color: #333;
}
<header class="iconbox">
<section id="features">
<div class="box bg-light">
<img src="{{ 'floare1.png' | asset_url }}"/>
<h3>Title</h3>
<p>Text</p>
</div>
<div class="box bg-primary">
<img src="{{ 'logo1.png' | asset_url }}"/>
<h3>Title2</h3>
<p>TEXT 2</p>
</div>
<div class="box bg-light">
<img src="{{ 'logo3.png' | asset_url }}"/>
<h3>Title 3</h3>
<p>Text 3</p>
</div>
</section>
</header>
This is an accepted solution.
please insert this code end of theme.scss.liquid file
Follow this : Online Store >> Themes >> Actions >> Edit code >> Assets >> theme.scss.liquid
please make 'm' letter lowercase
@_media only screen and (max-width: 600px) {
.box {
width: 100% !important;
}
Hello @Kinjaldavra !! I really appreciate your your help. Is it working in mobile now,the icons are one under the other,but with some problems.
1. The text is on the left,but is think I can add text-align: center; or other comand
2. The Menu bar disappear from deskop and also from mobile (check the images bellow) The slide image is not any more covering full
3. On the desktop screen the menu disappear and the icons are now the same like for mobile(one under the other and I want them one net to each other)
Which means comand float: left; width: 33.3%; from the .box {} are cancel.
Thank you so much @Kinjaldavra !!!
This is an accepted solution.
please share your site url so that i check it
Thank you! For the moment I am working on duplicate theme and because I am new on shopify, I don't know if is posible to send you the duplicate theme?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024