Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 30, 2019 at 12:46 am #1060271
    Smu88

    Hi!

    I have a problem with my 4 column footer… when the screen width reaches 1060px the text starts to get cut off… do you have any ideas on how to prevent this? I was thinking of displaying the footer in two rows, each row containing 2 elements on tablet screens, trying to hack it with some css but also was wondering if there is an easy solution for this, maybe setting an option somewhere or tell those elements to break into two columns per row instead of 4 when reaching 1060px…

    Please Help,

    Cheers,

    Philip

    • This topic was modified 5 years, 8 months ago by Smu88.
    January 30, 2019 at 1:46 am #1060295
    Jordan Shannon

    Hey Smu88,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    January 30, 2019 at 1:58 am #1060303
    Smu88

    sure here you go…

    thank you!

    February 1, 2019 at 7:07 am #1061391
    Vinay

    Hi,

    I checked the footer and it looks good on my end. Please see the screenshot attached.

    If you still have any issue please upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

    February 1, 2019 at 12:30 pm #1061496
    Smu88

    Hi!

    It might look good, cause you translated the page ;)
    Check out my screenshot, the headlines are cut off, as well as some content below them.

    Cheers,

    Philip

    Screenshot

    February 3, 2019 at 6:25 am #1062111
    Rikard

    Hi Philip,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
#footer .flex_column {
    width: 100% !important;
}
}

    Best regards,
    Rikard

    February 4, 2019 at 2:58 pm #1062707
    Smu88

    Nope sorry… please… you have a user… can you please login and try it out before you send me stuff thats not working…

    Thank you.

    Cheers,

    Philip

    February 4, 2019 at 4:51 pm #1062742
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
#footer p {
    word-break: break-all;
}

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    February 4, 2019 at 4:55 pm #1062743
    Smu88

    #footer p, #footer h3 {
    word-break: break-all;
    }

    this works partially… yes it breaks the words, but it won’t work in older browsers… I was hoping to get a solution on how and when to break the footer columns on different screen sizes…

    Philip

    February 5, 2019 at 8:57 pm #1063315
    Victoria

    Hi Philip,

    Best regards,
    Victoria

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