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

Solved
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 

0 Likes
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>

 

0 Likes
Natztech
Excursionist
100 15 14

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

 

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
Mihai7
Tourist
7 0 1

Hello @Natztech !! 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 @Natztech !!!

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

0 Likes
Natztech
Excursionist
100 15 14

This is an accepted solution.

please share your site url so that i check it 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
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?

0 Likes