Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1297735

    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?

    #1297856

    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

    #1298067

    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 1 week, 1 day ago by  Martian.
    #1298196

    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

    #1298331

    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?

    #1298420

    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

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

You must be logged in to reply to this topic.