[Support request] Issues with Flexbox option

[Tom]

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/

[Mikael]

That sounds great. I really appreciate it.

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

Thanks

[Tom]

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 🙂

[Mikael]

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

[Tom]

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

[Mikael]

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

[Tom]

Where can I see the new box on your site?

[Mikael]

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.

[Mikael]

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

Thanks

[Tom]

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;
}

[Mikael]

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

[Mikael]

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

[David]

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.

[Mikael]

Really great.

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

[David]

Glad we could be of help

[Author]

Posts