Solved

I have 3 icons under the slide.How to make them responsive on mobile?

Mihai7
Tourist
7 0 1

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.

 

print1.pngprint2.png 

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

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;
    }

 

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please share your site url so that i check it 

View solution in original post

Replies 5 (5)

Mihai7
Tourist
7 0 1

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>

 

Kinjaldavra
Shopify Partner
2302 570 1422

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;
    }

 

 

Mihai7
Tourist
7 0 1

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 !!!

print 2.pngprint 3.pngprint 4.pngprint 5.png

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please share your site url so that i check it 

Mihai7
Tourist
7 0 1

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?