Page Builder not working? Page mixed up on mobile

Hi Igor,

Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

Hi Igor Matosic

Sorry, not too sure how I missed it. You can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.panel-row-style {
    height: auto !important;
} 

You might also need to install the SiteOrigin CSS Editor.

Hi Igor,

Please replace the previous CSS that I gave you with the following. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.panel-row-style {    height: auto !important;} @media (max-width: 780px){	.panel-grid-cell {		padding: 0 2.5px !important;	}	#pgc-9-0-0 {		float: left  !important;		width: 44.951% !important;	}	#pgc-9-0-1 {		float: right !important;		width: 55.049% !important;	}}@media (max-width: 480px){	#pgc-9-0-0  .so-panel, #pgc-9-0-1 .so-panel {		margin-bottom: 220px !important;	}}

You might also need to install the SiteOrigin CSS Editor.

Hi Igor,

I’m sorry there was a typo in the CSS I previously posted. Can you please replace the CSS with the above corrected CSS. I’m not too sure how I can make the images bigger – I’ll have to get back to you on that.

Hi Igor,

Sorry about that it’s really late here and I really want to get a couple of threads resolved (this being one of them) before I head off. Please try now.

Hi Igor,

You’re not going to like this but… here’s goes. That’s due to how you’ve set up your pages. The issue here is that you should have done them via rows with layout builder widgets. That way the image and the text would be grouped together rather than being in separate columns. When they’re in separate columns page builder will move one of the columns up. Now I know that may sound odd but it’s an automated system so it has to presume certain things.

I’m willing to write up the CSS to resolve this issue so you don’t have to rebuild your layouts but you’ll have to give me time. It’ll take me quite a while to do so. Alternatively are your page builder powered pages consistently like this? As in, is it always column on the left with image, and column on the right with text?

Hi Igor,

I’m not too sure what you mean by the following sentence, “It is much better now, just tell me is it possible to remove some of the lines that separate the image from txt below?” Could you elaborate?

Regarding the cell length; you can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.panel-widget-style {
    height: auto !important;
}

You might also need to install the SiteOrigin CSS Editor.

Hi Igor Matosic

Please remove the last CSS I sent you. You can remove the extra spacing with the following custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

@media (max-width: 750px){
    .so-panel {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .panel-widget-style {
        height: auto !important;
    }
}

Now I’ve set the spacing to zero and it might look.. weird so feel free to adjust it if need be.

You might also need to install the SiteOrigin CSS Editor.

Hi Igor,

Happy to help! :) Is there anything else I can help you with today?