Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1101450

    Hi everybody, I have an issue with mobile screen. I edit my text column with 200px left and 200px right on wordpress text editor. It’s ok on computer but not on mobile screen.
    (My website on private content)
    I would like to not apply these margins on mobile.
    Thanks for your help,
    Regards,
    Iceman

    • This topic was modified 2 months, 1 week ago by  ICEMAN.
    • This topic was modified 2 months, 1 week ago by  ICEMAN.
    #1101520

    Hey ICEMAN,

    Can you try adding this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:959px) {
      #top.page-id-490 #after_section_1 .flex_column.av_one_full {
        padding: 0 20px !important;
      }
    }

    Best regards,
    Nikko

    #1101559

    Thank you Nikko, It works but just for the first part of my page…

    The second part is with exactly the same column settings

    • This reply was modified 2 months, 1 week ago by  ICEMAN.
    #1101563

    How do I do to apply your solution for an entire page ? and for the entire website (if necessary) ?

    Is it possible to apply your solution from style.css or other file of my child theme ?

    • This reply was modified 2 months, 1 week ago by  ICEMAN.
    • This reply was modified 2 months, 1 week ago by  ICEMAN.
    • This reply was modified 2 months, 1 week ago by  ICEMAN.
    #1101614

    Hi ICEMAN,

    I think it’s not good to apply it on every page since it will affect other columns that should not be a part of it.
    Adding a custom class would be a better idea so you can have full control.
    Do the following steps:

    1. Go to Enfold > Layout Builder > check Show element options for developers > save
    2. Edit the column that you applied the padding, it should have a new field called Custom Css Class, put mycolumn in it, then save
    3. Go to Enfold > General Styling > Quick CSS, then add this css code:
      @media only screen and (max-width:959px) {
        #top .mycolumn{
          padding: 0 20px !important;
        }
      }

    For every column that you want this style applied on mobile, just add the Custom Css Class.
    Hope this helps.

    Best regards,
    Nikko

    #1101696

    Thanks you Nikko, It’s perfect.
    Is it possible to edit these lines in a file of my child theme instead of quick css ? I’d like to have all my changes in my child theme.
    Regards

    #1101883

    Hi,

    If it is the code being overwritten that you are worried about, all code in quick css is safe from updates. Otherwise you can add custom.css to your child theme directory.

    Best regards,
    Jordan Shannon

    #1103386

    Ok , thank you Jordan,
    Best Regards

    #1103391

    Hi ICEMAN,

    We’re glad that we could help :)
    You can put it on your child theme’s css if you are more comfortable with it.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Column size’ is closed to new replies.