Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 30, 2021 at 4:56 pm #1303021
    ilkbaharkunduzu

    Hi,

    For the custom footer I added a Code Block. One wrapper div and inside 6 divs. This is the style below. 

    .footer-flex-container {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}

.footer-flex-container div{
    padding: 5px;
}

    When I create a html page to check the style, I do not see any problem in terms of responsiveness. However, in wordpress Enfold there is a problem. Why?

    HTML Page View

    The desktop view of html: https://ibb.co/kHRn5xG
    Enter Responsive Mode: https://ibb.co/ssXdFgt
    Manually Mouse Drag Smallest Browser Mode: https://ibb.co/6wtgXZ4

    Enfold Footer View:

    The desktop view of html: https://ibb.co/LnqVWLV
    Enter Responsive Mode: https://ibb.co/ckZSdwG
    Manually Mouse Drag Smallest Browser Mode: https://ibb.co/k4Z0Fwc

    Best Regards

    June 1, 2021 at 12:44 am #1303277
    ilkbaharkunduzu

    Hi,

    Instead of table view I just added img inside of a div with a left margin and near by that a text with br. 6 divs and a container div of course. That solved the problem. However, the widgets are not really good when the browser is in mobile view. They are not like 2 columns each. I will try to use @media and min & max width and try. 

    footer-flex-container {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}

.footer-flex-container div{
  display: flex;
  padding: 20px!important;
  min-width: 190px;
  text-align: center;
  align-items: center;
}

    Thanks

    June 1, 2021 at 5:08 am #1303315
    Rikard

    Hi,

    Thanks for the screenshots, and update. Please post a link to where we can see the actual problem, if you should need any further help with this. Also let us know exactly what you would like to fix, and on which screen sizes.

    Best regards,
    Rikard

    June 1, 2021 at 4:56 pm #1303447
    ilkbaharkunduzu

    Hi,

    I have solved the problem. The new footer seems nice. I added the link in private content. You can check in mobile 6 images in footer under the widgets. I just deleted the table style and use simple image and a text with <br>. However, there is one problem with this grid column of enfold above this custom code block.

    As you see in the image there is one grid for desktop and 2 for mobile to create 2 columns for each: https://ibb.co/94jsqLq

    I did this with this code below which solved the problem. It seems. Is this a good practice? I do not know. 

    .av-layout-grid-container + .av-layout-grid-container {
    display: flex;
}

    Without adding 3 grid rows, can we have this flex style responsiveness for the mobile view?

    Best Regards

    June 3, 2021 at 6:30 am #1303701
    Rikard

    Hi,

    Thanks for the update. So everything is working as it should then? If so, then I don’t see any problem with the CSS you are using.

    Best regards,
    Rikard

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