Lay-out four buttons in a row

Support
#1

In my site I use four self made buttons in a row.
On mobile landscape they should to be positioned full screen in a row (they now are stacked, not full screen and not centered) and on mobile portret the ought te be visible stacked ful screen (they now are stacked but not full screen and centered)

#2

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Option > Global CSS area.

@media (max-width:480px) {
  .home #x-content-band-6 .x-img img {
    max-width: 100px;
    float: left;
  }
}

Hope that helps.

#3

Sorry. No results as wished.
Some screenshots (iphone portret and landscape):


#4

Hi There,

First, please check the following links for the correct media query to use:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp


See this: https://screencast-o-matic.com/watch/cbXUhO2xSl

@media (max-width: 480px){ /*Feel free to adjust breakpoint or entire media query to include orientation*/
.home #x-content-band-6 .x-1-4 {
    width: 25%; 
    float: left;
}

Check the screencast as guide. Then adjust CSS based on your preferred media query.

Hope this helps.

#5

Thank you. Great step forward. On landscape IPhone its perfect. Only the full width option on portret IPhone isnt working at the moment.

#6

Hey @Droogers,

As you can see, this needs custom coding. For additional fixes or enhancements, you need to tweek the code we’ve given because this is going into custom development which is outside the scope of our support.

Thank you for understanding.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.