Responsive blocks in rows

[spakpoy]

Hi, I can’t work out how to make blocks in a column stack one over the other on a mobile device. I’m using Integrity and very simply have a block of texte next to a photo in a row, but I need them to appear one above the other on a phone or tablette.
thanks

[basanta]

Hi Spakpoy,

Thanks for writing in!
As I can see you have added the image and text in the separate column, it should break in the mobile device you expect.
But it’s not breaking in the mobile device due to an incompatible version of the theme and cornerstone.

Please update the theme and cornerstone to the latest version for a possible fix.

Please check for the following first:

1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.
3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
5. Remove custom CSS, Javascript and templates.

Hope this helps!

[spakpoy]

Hi,
Thanks for getting back so quickly and helping me find the problem. It was custom CSS on the page. On the forum I had found a solution to centre the text vertically next to the photo. They suggested entering the following code into the Inline CSS.

display: flex; align-items: center; justify-content: center;

It worked but obviously messed up the mobile version. What should I do to be able to have the text centered vertically ?
best regards
susan

[nabeel]

Hey Susan,

Instead of inline CSS, you can assign that element a class e.g centered-element and then add the following code in the Theme Options > CSS:

@media screen and (min-width: 768px) {
  .centered-element {
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
}

The above CSS will be applied only in screen resolutions greater than 768px. You can adjust the break-point as per your need.

You can also checkout the following guide on centering elements https://css-tricks.com/centering-css-complete-guide/

Hope this helps!

[spakpoy]

Hi, thanks very much but I can’t seem to get it to work. I added the code and assigned the element a class, but it doesn’t budge. Also tried with code from the article but for some reason nothing works. My text block doesn’t move !
Would you mind having a look ?

[thai]

Hi There,

Please remove the previous CSS, then follow these steps instead:

• Set the left & right margin of your text element to auto:

• Add this inline CSS to your column: vertical-align: middle;

Note: this solution is working with the marginless column only.

Hope it helps

[spakpoy]

Great, thanks very much. Looking good.

[rad]

You’re most welcome!