Alignment issue on Church demo

[insecureabnormality]

Hi folks,

I am having an issue with the church demo where the 4 columns on the home page aren’t lining up correctly on mobile. The images I have substituted are the same dimensions as the sample images and the text is the same amount of lines. How can I fix this? (please see attached screenshots)

[ruenel]

Hello Stephen,

Thanks for writing in! I have checked it and I can confirm that this is a bug in the demo because of the auto margin. To get this resolved, please edit your page and in each of the text element settings, find the “Customize” tab and insert the code below in the inline element CSS:

@media(max-width: 767px){
  $el.x-text {
     margin-left: 0;
  }
} 

If this is not working, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works


Best Regards.

[insecureabnormality]

Hi sorry but each of these elements is not a text they are a column with an image, a headline and a button so where does this code need to go?

[tristup]

Hi Stephen,

It seems that the Text Align attribute value of the column is not set to the center, I went ahead and set it for the first column only. It makes the images and the button center in the mobile devices. I would suggest you replicate the settings for the other three columns.
If you need to align the headline and the text in the center, please choose the headline and the sub-headline alignment center of the headline element of each column.

Hope it helps.
Thanks

[insecureabnormality]

That’s great that seems to have sorted it actually.

One more thing with the slider at the top. It looks great on the desktop but on the phone it crops off the sides of the image I am using. Is there a way to stop it going full screen on the mobile? - even if it only ends up being a third of the screen or something that I would be able to see the full width of the picture and then have the logo large over the top of it?

Thanks

[tristup]

Hi Stephen,

Glad to help you out on this. Regarding the slider, you can set the layout and layer are sizes to adjust the slider in the smaller devices.

You can get more information on layout, breakpoints, and sizes from this article: https://www.sliderrevolution.com/documentation/module-layout/

Hope it helps.
Thanks