Elements jumping and overlapping on lower resolution screens and mobile devices

[imfpa]

Hi ThemeCo,

Thanks for the awesome X-theme, I’m using Integrity on a client webpage, but I’m having some difficulties in getting a consistent look on some of the pages. Especially the ones with the Classic Promo element.

1. How do I make sure all Classic Promos are always the same height as the other Promos in the same row (this goes for both the home-page and the profiles-page (“Hvem”). ?

2. How do I remove the overlap when viewed on a mobile device (buttons get hidden) ?

You can see it on http://www.bb3.dk/hvem the Classic Promos - if you watch it on a phone the elements are overlapping each other.

Let me know if you prefer screenshots or if you need access.

Best regards
Ian

[marc_a]

Hey Ian,

Thanks for reaching out!

Yes, we need your credentials so that we can check on your setup properly? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[marc_a]

Hey @imfpa,

The given credential is not working, please double check and update it with the correct ones.

Thank you.

[marc_a]

Hey @imfpa,

Thanks for providing your details! I went ahead and check your page settings and I found out the reason behind your issue. It is the Gap height you set in the Row, you set it to -100px. I suggest that you set the Gap Height to 0.

Hope that helps.

[imfpa]

Hi Marc, thanks a lot! That did the trick.

Could you perhaps also help me with how I can ensure that all promos in each row are the same height? They tend to change height when it’s resized. (As in the screenshot)

Best regards
Ian

[marc_a]

Hey @imfpa,

The reason why they are not aligned is that the styling for the promo is inside the Classic Promo element which will require us custom CSS coding to achieve it. Since customization is outside the scope of our theme support. I suggest that you re-structure your section, in a way that we will add the styling in the columns. You can check the example test page I have created for you. ( See the secure note for the link).

Hope that helps.

[imfpa]

Thanks a lot - that is exactly what I needed - a lot less restrictive than the Classic Promo.

One final question - if I split the text element into two text elements, one containing name and title, and moving the buttons to the second one - would it then be possible to have the bottom one align with the bottom of the column, so the buttons are always aligned as well when the width is reduced? So that the white spacing that currently appears below the buttons in column 2, 3 and 4, will be between the text and the buttons instead.

[marc_a]

Hey @imfpa,

Yes, that’s doable! If you split the name, title and button into 2 text elements, I suggest that you add them inside a div element. In that way, we can set max height to a div element to have consistent layout across the browsers responsiveness. Your structure should look like this one.

Then in the first div element, I suggest that you add a max-height, for example 80px.

Hope that helps.

[imfpa]

Sure does! It’s a really nice approach - and works really well. Where do I set the boundary for when the horizontal resolution is too low so it will split the four columns into to two rows of two, and later to one column per row ?

[marc_a]

Hi @imfpa,

I check your setup and I believe that you already figure it out! This is what I am referring to.

If that’s not the case, please let us know.

Cheers!