[Support request] Issues with Flexbox option

Home Forums Support [Support request] Issues with Flexbox option

Home Forums Support Issues with Flexbox option

  • This topic has 29 replies, 4 voices, and was last updated 12 months ago by David.
Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #1482933
    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,

    #1483159
    David
    Staff
    Customer Support

    Hi there,

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

    #1483414
    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.

    #1483446
    Leo
    Staff
    Customer Support

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

    #1483453
    Mikael

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

    #1483659
    Tom
    Lead Developer
    Lead Developer

    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!

    #1484157
    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

    #1484629
    David
    Staff
    Customer Support

    How did you add this content to your site?

    10.11.2020-11.17.56

    #1484663
    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.

    #1485191
    Leo
    Staff
    Customer Support

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

    He shouldn’t have edited the theme files.

    #1485273
    Mikael

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

    #1485720
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
    #1486218
    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

    #1487132
    Tom
    Lead Developer
    Lead Developer

    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.

    #1487193
    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

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.