Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Columns 2/row on mobile
New Landing › How can we help? › Themeforest Theme Support › Dante › Columns 2/row on mobile
- This topic has 15 replies, 2 voices, and was last updated 8 years by Kyle – SUPPORT.
-
Posted in: Dante
-
February 25, 2016 at 1:28 pm #251975
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!
February 25, 2016 at 1:39 pm #251981Hi
You would need to add an extra class to the columns so I can provide some custom css
– Kyle
February 25, 2016 at 1:45 pm #251987I’ve added .rows
Thank you!
February 25, 2016 at 1:46 pm #251988Please change it to .mobile-2col
– Kyle
February 25, 2016 at 1:48 pm #251989Done
February 25, 2016 at 1:50 pm #251990Add this to your custom css:
@media only screen and (max-width: 479px) { .mobile-2col.col-sm-6 { width: 50%; float: left; } }
– Kyle
February 25, 2016 at 1:59 pm #251995Looks 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?
February 25, 2016 at 2:22 pm #252006Try 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
February 25, 2016 at 2:40 pm #252015I 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!
February 25, 2016 at 2:44 pm #2520191) Add this
.spb_slider_widget { margin-bottom: 0; }
2) Did you add the extra class to your icon box?
– Kyle
February 25, 2016 at 2:53 pm #2520201) 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?
February 25, 2016 at 2:55 pm #252022@media only screen and (max-width: 479px) { .mobile-2col.col-sm-6 { float: left; width: 50%; margin-bottom: 0; } }
– Kyle
February 25, 2016 at 3:26 pm #2520331) 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!
February 25, 2016 at 3:45 pm #252038Add this inside your media query:
.spb_icon_box.no-text { margin-bottom: 0; }
– Kyle
February 25, 2016 at 3:55 pm #252041Perfect, 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.
I’ve also provided the login details…
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.