Page alignment and resize issue

Support
#1

Hello,
I have a grid-like page built with cornerstone that is having an alignment issue with the bottom row. Moreover the elements, it goes out of alignment when I resize the page.

Bottom row mis-alignment:

Summary

Staff page

#2

Resize problem:

#3

Hi there,

The problem you are experiencing is because in the smaller screens there is not enough space to hold three images, and it pushes to the next row.

That would be the case if you did not do the small screen handling in the first row either.

So for the second row again use 6 columns and add the writing to the first column and keep the second column empty.

That should do the trick.

Thank you.

#4

Thank you for the response. The second row is configured to use a 1/3 column followed by 1/6 columns. Is the issue the use of the 1/3 column?

#5

Hello There,

I have inspected your page and you added a custom css. Please remove this code first:

.x-column.x-sm.InstructorCol {
   margin-right: 1%; 
   width: 15%;
}

Please allow the widths from 1/3 and 1/6 settings instead. And by the way, do not leave any empty column. You should add a gap element if needed.

If still nothing is working, please provide us access to the site so we can take a look at your element settings.

Please let us know how it goes.

#6

Thank you for the suggestion,

I’ve placed a gap element inside the first 1/6 element after the 1/3 element on the 2nd row with a size of 132 x 132. This seems to have fixed the resize issue, but I can’t get the gap setup correctly on the second row. How do I fix this one?

#7

Hi there,

Please kindly get back to us with the URL/User/Pass of your website and the name of the page in question using the Secure Note functionality of the post to follow up the case for you.

Thank you.

#8

Here it is

#9

Hi again,

Thank you for sharing the credentials. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.el27.x-line {
    min-height: 1px;
}

Then find and remove the following CSS code from your Customizer:

div#RedProfileText {
    width: auto;
    font-size: 100%;
    height: 8em;
}

You can keep this part if you like to:

div#RedProfileText {
    height: 8em;
}

This should fix the issue. Let us know how this goes!

#10

Thank you, that’s much better :slight_smile:

I’m seeing some issues when I resize the display smaller

#11

Hey there,

Can you please try adding the following code in your Customizer as well:

@media (max-width: 767px){
  .el27.x-line {
    display: none;
  }
  .el27.x-line, .el38.x-line {
    height: auto !important;
  }
}

Let us know how this goes!

#12

Thank you! This works better. Looks like there’s still another gap to fix:

#13

Hi again,

I checked your setup, since you’re using different rows for different sets of images, removing a gap might not be possible with the current setup. If you had even number of images then that could have been achievable. If you need to display it without a gap then you can setup two different content, one for desktop and one for mobile screens and adjust things accordingly.

Thank you for understanding!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.