Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 1, 2021 at 7:01 pm #1297735
    Martian

    Hi there,

    I have a portfolio entry with a lot of text. Currently, the text is filling the complete width of the text box. I would like it to be a max width of approx. 800 pixels. I don’t want to add padding, as this affects the responsive view as well and I do not require padding on a mobile device. I have tried to add custom css, but it doesn’t seem to be working. This is what I’ve tried:

    #top #main .avia-section .template-page {
    max-width: 800px!important;
    }

    #case-study-text #top #main .avia-section .template-page .case-study-text {
    max-width: 800px!important;
    }

    #case-study-text .template-page .content .av-content-full .alpha .units {
    max-width: 800px!important;
    }

    Can you help?

    May 3, 2021 at 5:54 am #1297856
    Nikko

    Hi Isabel,

    This code should work just fine:

    #top #main .avia-section .template-page {
  max-width: 800px !important;
}

    Can you give us a screenshot of how this results in mobile? this code shouldn’t have any impact in mobile since it only sets the max-width but the default width is still 100%.

    Best regards,
    Nikko

    May 3, 2021 at 5:16 pm #1298067
    Martian

    Hi Nikko

    Unfortunately, the code has no effect on my page, the text block is still running across the full width (and not 800px).

    The mobile version is not a problem. What I meant was, that it would be a problem, if I was trying to reduce the width of the text block by adding padding – which I am not. I am trying to give it a max-width.

    Would you mind taking another look at it why it’s not working?

    • This reply was modified 3 years, 6 months ago by Martian.
    May 4, 2021 at 8:00 am #1298196
    Nikko

    Hi Martian,

    The code is not being read because of this unclosed code block in the child theme’s style.css (line 118):

    .main_color .avia-icon-list .iconlist_icon

    Please close it and it should work.

    Best regards,
    Nikko

    May 4, 2021 at 4:21 pm #1298331
    Martian

    Fixed, thank you!

    The code changed the max-width of the whole page to 800px wide. Is it possible to apply the max-width only to one color section?

    May 5, 2021 at 5:37 am #1298420
    Nikko

    Hi Martian,

    We’re glad to hear that :)
    Please do the following:
    1. Set the Custom CSS Class to mysection in the Color Section. (you can rename mysection to anything you want)
    2. Add this CSS code in Quick CSS:

    #top #main .mysection .template-page {
  max-width: 800px !important;
}

    Then if you need to apply this on specific Color Section in other pages then you just need to repeat step 1.
    Hope this helps.

    Best regards,
    Nikko

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