Text and images not aligning on different screen sizes

[LBYL_FILMS]

Hello,

I would like for the movie poster and to remain equally aligned on all screen sizes. desktop and laptop is fine but as it gets smaller , they do not align properly as shown in the screenshot below. The url is http://77.104.151.155/~lbylilms/films/. Please advise. Thank you

[mldarshana]

Hi Salim,

Thanks for writing in! I have tested your referenced URL on major screen widths, but I could not replicate such issue.

Width 768px

Width 480px

Width 320px

Make sure to clear your browser cache and test this issue further. If you see this issue on a particular device, let us know that as well.

Thanks!

[LBYL_FILMS]

its the top row. As per your screenshot…

[jade]

Hello Salim,

The misalignment happens due to the text above the images pushing the other images lower when the space is not enough to contain the text in one line.

A solution for this is to write some custom media query to change the font size of the text on the second and third column to fit in one line so that the images below them don’t get pushed down.

Please try this code to the Element CSS of the second text element:

@media (max-width: 1291px) {
    $el {
        font-size: 1.45em;
    } 
}

Then add this to the Element CSS of the text element that is in the third row:

@media (max-width: 1106px) {
    $el {
        font-size: 1.45em;
    } 
}

The downside of this approach is that you will have to change the font size value in the codes above for the text to be aligned correctly in certain font size.

Element CSS | Themeco Docs

Please note that the layout you are trying to work with is quite tricky to balance out on the display because the text above the images do not have the same length and they would surely have different height as the screen size shrinks which would require you to write more custom codes which goes beyond the scope of our support or you might want to change the layout of the section.

Hope this gives you some insights.