Images in a row

Hey cipriana,

Could you post a link to the page in question so that we can take a closer look please?

Best regards,
Rikard

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.home #av_section_2 .no_margin.av_one_fifth {
    width: 20% !important;
    float: none !important;
    display: table-cell !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
}

Best regards,
Rikard

Hi,

I think that happens because the text cannot fit inside of the container. That’s why it’s a better idea to let the elements have their space on mobile sizes too.

Best regards,
Rikard

Hi,

I’m not sure to be honest, do you have to keep them inline on small screens? I would try to find a layout which works on mobile too, maybe you could try creating a separate layout for mobile only? You can do so by putting it in a Color Section and give the section an ID (for instance my-id), then hide it on all screen sizes except mobile:

@media only screen and (min-width: 768px) {
#my-id {
  display:none;
}
}

Best regards,
Rikard

Hi,

Yes, the process would be the same for hiding sections for mobile/desktop. You could try something like this in Quick CSS:

@media only screen and (min-width: 768px) {
#section-desktop {
  display:block !important;
}
#section-phone {
  display:none !important;
}
}

@media only screen and (max-width: 767px) {
#section-desktop {
  display:none !important;
}
#section-phone {
  display:block !important;
}
}

Best regards,
Rikard

• This reply was modified 7 years, 6 months ago by Rikard.