Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 16, 2019 at 2:32 pm #1101450
    ICEMAN

    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 5 years, 6 months ago by ICEMAN.
    May 16, 2019 at 5:08 pm #1101520
    Nikko

    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

    May 16, 2019 at 7:20 pm #1101559
    ICEMAN

    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 5 years, 6 months ago by ICEMAN.
    May 16, 2019 at 7:43 pm #1101563
    ICEMAN

    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 5 years, 6 months ago by ICEMAN.
    May 17, 2019 at 4:00 am #1101614
    Nikko

    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

    May 17, 2019 at 9:36 am #1101696
    ICEMAN

    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

    May 17, 2019 at 5:27 pm #1101883
    Jordan Shannon

    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

    May 22, 2019 at 4:27 pm #1103386
    ICEMAN

    Ok , thank you Jordan,
    Best Regards

    May 22, 2019 at 4:36 pm #1103391
    Nikko

    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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Column size’ is closed to new replies.