General Issues on Mobile Display

Support
#1

Hey guys,

I’ve bought a lot of licenses with you guys over the years and generally love your product. Lately I’ve been having issues with the responsiveness of the layout on mobile and it’s causing me some grief. I am a strong CSS developer overall but one of the reasons I buy this theme over and over again is because, typically, it displays great out of the box. As it is, we’re having alignment and overlap problems.

I also have a specific issue that I’d like your feedback on. I very often create large containers with background images. In the past, I’ve used variations on height, min-height and max-height to achieve my goal of creating a container large enough to display the image. Currently, the height attribute is causing issues on mobile–in your opinion, should I just switch to padding and call it good?

Sites with issues:

thewoodyinsurancegroup.com (mobile menu not dropping down)

forkc.org (custom CSS on this one but the top section isn’t aligning, none of the sections resize as expected (see the internal ads section), nothing seems to have inherent inline styles on them so they don’t wrap properly…)

I have others as well but these are two most pressing.

I’ve used this theme many times as stated and didn’t used to have these out of the box problems. What’s changed or what do I need to change about how I use the theme?

My expectation is that when I create a row with columns that those columns will then behave as expected on mobile (wrap properly, have a little padding around them so they don’t just stack on top of themselves, etc.).

Finally–on the forkc.org site, when I inspect elements, I will sometimes see 8-10 auto-generated sections that are causing issues. When I look on my end, I obviously only have the sections that I’ve created with no additional blank ones.

#2

Hi there,

You are using an updated version of Cornerstone but an outdated version of X on this site which causes a conflict. Kindly update X as well to avoid issues.

Are you referring to the images under FRIENDS OF THE RIVER KC? The issue is not because of the theme’s responsiveness but because how the section and its contents are structured. Firstly, the images fail to align correctly because they are poorly set up. For example, the images that are placed in the third section that only displays on small to extra small screen widths have different margins set to it. You will have to improve the layout of this section so that it will resize smoothly on mobile. You can do this by setting up a row with 5 columns and place each image in each row.

That way, you can freely control the spacing of the images between each other by setting the margin not to the image element but to the column that contains the image, although you will not need to add any spacing because by default, each column that a space between other columns, Also, the images will resize better to it’s container as one image will be placed in one column container.

Cornerstone does not auto generate any section. You are seeing blank sections when you inspect the code because you added them but only made them visible in mobile view. See the screenshot below for example

As you see, this is one of the sections that is set to only display on mobile.

#3

Hi guys,

Thanks for the detailed responses. I’ll update all of the plugins/elements to avoid some of the issues.

In regards to the additional sections/layout issues I’m experiencing:

I began to experiment with hiding different sections on large vs small views because when I initially created the section, I did a 5 column layout, added my images, saved and when I viewed on mobile, they all crashed into one another and basically did not behave as expected. I thought that perhaps I needed to create different sections with different layouts for each view/media query breakpoint. I can do this through CSS but obviously it would be ideal if the theme worked out of the box.

I will revert it back to that original 5 column layout and send you a screenshot. I’ll be working on this site today as we need to get these things resolved quickly.

Thanks for the help–I’ll follow up after I’ve made some changes on my end.

#4

Hey There,

Thanks for the updates. I just want to add that the columns will always collapse into one single column in smaller devices. This is how we have designed the columns responsively. If you want to display 5 columns that remains 5 columns in smaller screens, you may create the 5 columns in your pages first, add a unique section ID and we can provide you with a custom css later on.

Please let us know how it goes.

#5

howdy! I’m back with a few screenshots.

First up–it looks like this is probably the default behavior for the mobile layout but it’s not going to work for my client. Having this collapse to a row of left-aligned images with no padding in between is a no-go.

It would be great if they would stay in a row, I’ve assigned an ID to them #eventheaders as suggested. I’d love your CSS suggestions for this.

In general, for rows that can collapse into a straight line, is there a way to make sure that in mobile there is some padding in between the images? See for example, these screenshots:

and this one where the social boxes are overlapping:

Thanks guys.

#6

Hey @LNUredi,

Are you looking for this look?

The CSS for that is this:

#eventheaders .x-container {
    display:flex;
}

#eventheaders .x-column {
    padding: 0 5px
}

The best solution for this would be to add a Gap element below each of your image elements and only show those gaps on mobile using the Hide During Breakpoints feature.

Hope that helps.

1 Like
#7

I can do that. I have one more for you–this one continues to stump me.

For the sections that have the curved images: what I want to accomplish is a container with a background image (contained), with the white text box set on top with position to reflect a 0 left and approx 50% top position. I need this to scale.

I am currently using this for the container with the background images:

margin: 0 30px;
padding-bottom: 76% (this is the aspect ratio of the images)
height: 0!important;

I have my Cornerstone settings set to “contain” and “center” for the background size and position.

What I expect that I get containers that scale according to the size of the image that don’t overlap.

It looks fine when I’m in the customzier view but looks like this when I view the page.

I tried setting “height” to min-height to avoid any overlap but no dice? What the heck?

Link to page: www.forkc.org/test-home

I’ve been trying to accomplish this fairly simple thing for a while now and I just can’t seem to make it work in the theme.

Thanks as always.

#8

Hey @LNUredi,

I’m sorry but I don’t understand the issue. Would you mind creating a separate thread for this one and give us what layout you’d like to accomplish on desktop, tablet and mobile.

Thanks.

#9

Sure thing.

#10

Thank you!

#11

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