Columns 2/row on mobile

[costin]

Hi,

On the page footer I have 2 rows (with Rev Slider inside) which on mobile will transform in one per row. Is there a way please to keep 2 per row when on mobile?

Thank you!

[Kyle – SUPPORT]

Hi

You would need to add an extra class to the columns so I can provide some custom css

– Kyle

[costin]

I’ve added .rows

Thank you!

[Kyle – SUPPORT]

Please change it to .mobile-2col

– Kyle

[costin]

Done

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 479px) { 
.mobile-2col.col-sm-6 {
  width: 50%;
  float: left;
}
}

– Kyle

[costin]

Looks fine, thank you! How can I reduce the space between the 2 rows?

I’ve just noticed that, even though I’ve deleted the “click the edit button to change this text.” from Icon Box, it’s still there. How can I remove it please?

[Kyle – SUPPORT]

Try adding padding 0 so:

@media only screen and (max-width: 479px) { 
.mobile-2col.col-sm-6 {
  float: left;
  padding: 0;
  width: 50%;
}
}

For the icon box it has to have content. To hide it add the extra class no-content to the icon boxes then add this custom css:

.no-content .sf-icon-box-content {
  display: none;
}

– Kyle

[costin]

I would like to reduce the space/gap between the 2 rows/lines but it seems that the code provided is reducing the space between 1st and 2nd and 3rd and 4th. Is there another css I can use please?

The code for icon box doesn’t work unfortunately. I would like to use it only for that specific box as in other I do have content. Would it be possible please?

Thank you!

[Kyle – SUPPORT]

1) Add this

.spb_slider_widget {
  margin-bottom: 0;
}

2) Did you add the extra class to your icon box?

– Kyle

[costin]

1) no change…

2) sorry, works now. On desktop it’s perfect but on mobile I have a big gap between the icon box and next content. How can I reduce it only on mobile?

[Kyle – SUPPORT]

@media only screen and (max-width: 479px) { 
.mobile-2col.col-sm-6 {
  float: left;
  width: 50%;
  margin-bottom: 0;
}
}

– Kyle

[costin]

1) Works now

2) The space below the icon box with “Discover our destinations” is created by a divider of 30px and looks OK on desktop. If I remove it the icon box will have a margin 0 on bottom. But on mobile, at this moment the space is too big. Is there a way to reduce it please?

Thank you!

[Kyle – SUPPORT]

Add this inside your media query:

.spb_icon_box.no-text {
  margin-bottom: 0;
}

– Kyle

[costin]

Perfect, thank you very much! I appreciate highly your speed of response.

As my support will expire in just a few days, could you please have a look at another topic which is unsolved and maybe you can help me.

Related products not working

I’ve also provided the login details…