How to align some icons in a horizontal line on mobile devices

[alexguerro]

Hello, thanks for this forum.

I want to make some small images or icons lie horizontally when viewed on a mobile phone (smaller 767px screen). I am using the X Theme.

This is what I have on desktop and mobile (https://yosoylotovioleta.com/gracias-por-suscribirte/):

I have the CSS inline of the row with: “max-width: 350px;”

Inside this row I created a sub-row with the element row, and I set the class: “alinearmovil” to this sub-row

Then in the CSS of the page I wrote some commands that I found in one of the threads within the forum:

@media only screen and (max-width: 767px) {
.alinearmovil {display: table! important;}
.alinearmovil .x-column.x-1-3 {display: table-cell! important; width: 33.33333%! important;}
}

But I cannot make the icons of the Social element appear on the same line on mobile devices.

How can I achieve this?

Thanks

[ruenel]

Hello @alexguerro,

Thank you for the very detailed information. Please refrain from using custom CSS. It will just give you complications later on. What you can do to resolve your issue is to use only one column and insert the 5 button elements in the column. You will have to enable the Flexbox option the column settings so that the buttons will display inline both in desktops and mobile screens. You will have to set both the horizontal and vertical alignment to the “center”.

If this does not work for you, provide us access to your site so that we can create an example for you. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[rad]

Hi @alexguerro,

Your content is not specific to Pro feature, your icons are added within the builder, and each has its own column. But since you’re on old version it would need custom CSS, please add this to your Theme Options > CSS

.alinearmovil .x-column.x-1-5 {
    width: 16.8% !important;
    margin-right: 4% !important;
    float: left !important;
}
.alinearmovil .x-column.x-1-5:last-child {
   margin-right: 0 !important;
}

Please note that we don’t provide support or cover code maintenance, the CSS is only provided as is and any further changes will be yours to maintain

I also recommend updating your site, you’re missing a lot and good features. Please we don’t provide support for very old versions especially the features are long changed. You could use staging (cloned of your live site) for testing it so you could fix any issues before moving it live preventing any downtime to your live site.

Thanks!

[alexguerro]

@rad

.alinearmovil .x-column.x-1-5 { width: 16.8% !important; margin-right: 4% !important; float: left !important; } .alinearmovil .x-column.x-1-5:last-child { margin-right: 0 !important;

That Works pretty good… Many thanks…

[friech]

We are delighted to assist you with this.

Cheers!