Layout problem

Hey,
Do you mind posting a link to where this is on your site?

Hannah

Hello Hannah,
my site is on local install. But the problem is like in the link I mentioned. I have a row with page builder and then two equally sized columns. On desktop, the image has the same height(and width) as the text, but on tablet the text is really narrow and much longer than the image.

Hey,
I recommend making the columns responsive so they change to a single column layout with the image above the text on smaller screens. You can set this in the settings > pagebuilder.

Kadence Themes

Hi,
thank you but in the settings the layout is already set to responsive and 780px(the default).But between 1200 and 780 px width the text is just very long and narrow with a tiny image. Or are you saying to change the settings for page builder to 1200 px?

it depends. You can use css just to make that particular column switch that early without seeing the site it’s hard to offer advice. You can also use css to change the width percentage of the columns from the 780-1200px range. I can’t offer that exact css without seeing the site through.
Maybe when you upload to a server you can post back here and I can get you some custom css.

Kadence Themes

I will do that, thank you very much for your reply!

Hi again,
my site is still not on a public server but I have tried css like
@media(min-width:781px)and (max-width:1199px) {
#pgc-58-2-1.panel-grid-cell {
width:100%;
}}`
and this did move the image underneath the text, but it also removed the default margin on top of the image so the image wa right attached to the text above.
I also tried setting page builder settings to 1199px, and this does work, I am just wondering if this has any effect on the theme’s layout since the theme is switching to mobile at 767 and not 1199. Also not sure if it is advisable to switch that early, maybe there are small laptops that would now also see the mobile version?

I don’t’ suggest setting page builder to switch that large. You can just add padding with the css something like this:

@media(min-width:781px)and (max-width:1199px) {
#pgc-58-2-1.panel-grid-cell {
width:100%;
padding-bottom:15px;
}}

Kadence Themes

So I realised when doing using this code, I would also need to set the cell with the text to 100%…I have this set up on 4 different pages and it seems like a lot of css. Do you think setting the mobile layout to 992px would be okay? Or is this still too high?
Alternatively, do you maybe have any recommendation on how to design the pages if you want text on one side and an image on the other?

992 is fine for mobile and tablet.

My best advice is to get your site on a server so I can see what you mean. Then I may be able to offer better suggestions for how to do this.

Kadence Themes