-
AuthorPosts
-
April 19, 2017 at 5:43 pm #780073
Hi, could you help me with this?:
-I have 5 images in a row, each of them in 1/5 column.
In mobiles devices each of them fall one below the other. Is it possible to keep them in one row on mobiles too? How could I do that?
(I attach 2 screenshots to explain me better).
Thank you very much!April 20, 2017 at 7:04 am #780333Hey cipriana,
Could you post a link to the page in question so that we can take a closer look please?
Best regards,
RikardApril 20, 2017 at 9:25 am #780389Sure, here you have.
April 21, 2017 at 5:35 am #780971Hi,
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,
RikardApril 21, 2017 at 10:29 am #781083Hi, it worked! Thanks
Now, I don´t know why some of the texts (epigraphs) over the images are not well centered with the image.
I show you with a screenshot.Thanks!
April 22, 2017 at 6:23 am #781540Hi,
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,
RikardApril 23, 2017 at 3:06 pm #781946HI, what do you mean Rikard?
I´ve given them default size.
And if I give them 10px, which is the smaller possible size offered, they are not well centered either.
What do you suggest?
ThanksApril 24, 2017 at 5:02 am #782123Hi,
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,
RikardApril 24, 2017 at 3:41 pm #782352That sounds good.
and I think I should do the same with the layout for desktop right? Hiding it for mobiles…
Which would be the css code in that case?Thanks
- This reply was modified 7 years, 8 months ago by cipriana.
April 25, 2017 at 6:50 am #782672Hi,
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, 8 months ago by Rikard.
April 25, 2017 at 11:21 am #782746That worked. Thank you very much!!
April 25, 2017 at 12:15 pm #782787We’re always glad to be of help! Do let us know here in the forums if you need help with anything else.
Thank you for using Enfold.
Cheers!
Sarah -
AuthorPosts
- The topic ‘Images in a row’ is closed to new replies.