Issues with Flexbox option

If you want to copy your content-single.php you shared a screenshot of and put it in a GitHub gist, I may be able to help tweak it: https://gist.github.com/

That sounds great. I really appreciate it.

I have now created it and shared a link to it in the private info box.

Thanks

After this line: https://gist.github.com/moeller79/6b7b4bbef2964f8e6d34eba54098419e#file-gistfile1-txt-L60

Add this:

<div class="review-container">

Before this line: https://gist.github.com/moeller79/6b7b4bbef2964f8e6d34eba54098419e#file-gistfile1-txt-L96

Add this:

</div>

Then add this CSS:

.review-container {
    display: flex;
    justify-content: space-between;
}

.review-container .first-column {
    width: 40%;
}

.review-container .second-column {
    width: 55%;
}

@media (max-width: 768px) {
    .review-container {
        flex-direction: column;
    }

    .review-container .first-column,
    .review-container .second-column {
        width: 100%;
    }
}

That should do it :)

Thank you very much Tom.

However, the spacing does not look correct now between the image and the text. I have sent a link with a screenshot in the private info box.

And on mobile it looks completely off. I have also sent a link for a screenshot of this.

Also, when you say to add the CSS, is it fine to add it in the appearance - customizer - additional CSS? Or is it better to add it somewhere else?

Thanks again for all your help

Can you try the updated CSS?: https://generatepress.com/forums/topic/issues-with-flexbox-option/page/2/#post-1488905

Thanks Tom,

It still looks strange on mobile. I have attached two screenshots. One of how it looks with this CSS and one of how it is supposed to look like.

Also, is there a way to make the spacing after the header section smaller as it has become too big with this CSS? I have also attached a screenshot where I have marked in red the spacing I am talking about.

Thanks

Where can I see the new box on your site?

I have just added it to a staging site so you can see it as I do not want it on my live site before I have figured out how to di it properly.

But I have attached a link to a staging site with the same settings so you can see it there.

Just wanted to check if you have had the time to look at this?

Thanks

Sorry about that! Your reply was closed accidentally.

Try this updated CSS: https://generatepress.com/forums/topic/issues-with-flexbox-option/page/2/#post-1488905

For the gap, try this:

.review-container + .entry-content:not(:first-child) {
    margin-top: 10px;
}

Thank you very much Tom. I appreciate all your help. It looks a lot better now and looks great on mobile.

The only thing is just the side spacing for the top image on desktop is a bit off / too big now.

I have added a screenshot.

Thanks

and one more thing - when adding the CSS you gave, I have so far just added by going to customize - additional CSS.

Is this ok or should it be placed in the stylesheet for the best performance?

Thanks

Hi there,

edit the 55% in this CSS to increase the second column width:

.review-container .second-column {
    width: 55%;
}

Try 57% ( must be less than 60%)

If you have a child theme style sheet with other CSS in it then i would move the CSS there.
If you haven't then its no problem leaving it in Additional CSS - its a tiny amount of CSS that will have no performance impact.

Really great.

Thank you so much for all your help. I really appreciate it.

Glad we could be of help