[Support request] Issues with Flexbox option

[Mikael]

Hi,

I have tried switching to Flexbox as I can understand it will help the performance of my site.

However, I have some custom code at the top of my reviews that then change the look and as I am not a coder, I have no idea how to change it to flexbox but still keep the same design.

Is this something you can help me with or point me in the right direction about how to solve this?

I have shared a link to my website in the “private info” box. Right now it still has floats as I want to know how to fix the design before switching to Flexbox.

Thanks,

[David]

Hi there,

can you switch to Flexbox temporarily so we can see the issue?

[Mikael]

I have a screenshot I can send so you can see if you can let me know how I can send it? Would that work for you or do you need to see it on a live site?

I would prefer not to let it be live with the wrong design for too long but if you need to see it live, I will try to find a solution for it.

[Leo]

You can use a service like this to upload the screenshots:
https://postimages.org/

[Mikael]

Thanks. I have just added links to images in the private info box.

[Tom]

Hi there,

This is because you’re using the old float grid classes here: https://www.screencast.com/t/HCzm9Rp6WSe5

Instead, do this:

<div class="review-container">
    <div class="review-left-column">
        Stuff in left column.
    </div>
    <div class="review-right-column">
        Stuff in right column.
    </div>
</div>

Then add some CSS:

.review-container {
    display: flex;
}

.review-container > div {
    width: 50%;
}

Hope this helps!

[Mikael]

Thank you.

I am just not very good with code so just want to make sure. I think I found what you are referring to in the content-single PHP file. But not completely sure what I then need to delete. Would you mind taking a look? I have sent a link to a screenshot of what currently is in the file now.

Also, I think I found where in the stylesheet I need to add the css you send. But not sure what I then potentially need to delete. I have also added a link to a screenshot of this if you would be so kind to take a look.

Thanks

[David]

How did you add this content to your site?

[Mikael]

I did not add it – I had a developer set it up as I wanted a specific design that required a bit of coding and that is not really my strength.

But I asked him if he could help with these flexbox corrections and he did not know how to do anything and tried to charge me just for turning on the flexbox settings but could not fix the design issues.

I will be more than happy to pay someone to fix it, if you know someone trustworthy that can do this.

[Leo]

Can you ask the developer where the previous code was added?

He shouldn’t have edited the theme files.

[Mikael]

I just asked and he says he did not add any code but just added css code in the customizer

[Tom]

I suppose you could add CSS to make those elements float again:

.grid-40 {
    width: 40%;
    float: left;
}

.grid-60 {
    width: 60%;
    float: left;
}

@media (max-width: 1024px) {
    .tablet-grid-50 {
        width: 50%;
        float: left;
    }
}

@media (max-width: 767px) {
    .mobile-grid-100 {
        width: 100%;
    }
}

[Mikael]

Thanks. I just tried adding that on a staging site and it does fix some of it. But the spacing is wrong though.

Also, if using CSS to make the elements float, will it not defeat the purpose of using flexbox?

I will be happy to give you access to my site so you can take a look or if you have any suggestions for what I can do I would love to hear it. I do not mind hiring a developer to do it if it is necessary but just do not know exactly what to tell him and not sure anyone will know how to fix it as it is such a new option on GP.

Thanks

[Tom]

Ideally, your HTML structure for that box needs to be re-written.

If you can paste it here (the necessary part), I may be able to help.

Otherwise, you may be better off sticking with floats for now until someone can go in and clean it up.

[Mikael]

Thanks.

I am sorry but I do not know how to find the exact code you need me to send?

Also, if I want to wait until someone can clean it up, do you know where I can find someone knowledgeable enough about GPP to be able to do this?

Thanks again

[Author]

Posts