Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 1, 2022 at 1:47 am #1342617
    Jak73

    Hi,

    i added a box on my contact page.
    How ca i reduce the with of the yellow box to 75% (so that it is smaller in width, then the text above it)?

    How can i make this, that this will also work in responsive mode (from horizontal mobile view)?

    kind regards

    Jak

    March 1, 2022 at 3:34 am #1342629
    Nikko

    Hey Jak73,

    Please add this CSS code:

    .page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

    Best regards,
    Nikko

    March 1, 2022 at 8:53 am #1342661
    Jak73

    Hi Nikko,

    thanks for your help!

    This works great in desktop mode, but makes the box to small in mobile view.
    Seems keeping the box 100% in mobile view (vertical mobile view) would be better.

    How can i fix that?

    kind regards

    Jak

    March 1, 2022 at 9:24 am #1342665
    Nikko

    Hi Jak,

    Please replace the code I gave with this:

    @media only screen and (max-width:767px) {
  .page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

    Best regards,
    Nikko

    March 1, 2022 at 9:49 am #1342670
    Jak73

    Hi Nikko,

    at first: many thanks for your help!!!!

    Do you mean (max-width:767px) or (min-width:767px).
    I’m asking, because i would like to reduce box-size in desktop view and have it at 90-100% in mobile view?

    Seems opposite in the moment?

    kind regards Jak

    March 1, 2022 at 11:05 am #1342684
    Rikard

    Hi,

    Thanks for the update. If you are looking to target sizes above mobile, then please try this instead:

    @media only screen and (min-width: 768px) {
.page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
}

    Best regards,
    Rikard

    March 1, 2022 at 11:20 am #1342689
    Jak73

    Hi,
    thanks for your help!

    So i should take this one for desktop width correction:

    .page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

    and this one for mobile adjustment:

    @media only screen and (min-width: 768px) {
.page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
}

    right?

    kind regards
    Jak

    March 1, 2022 at 1:27 pm #1342710
    Nikko

    Hi Jak,

    You can use this code (the first block is for desktop, the one with @media query is for mobile):

    .page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 767px) {
    .page-id-416 .av_textblock_section.av-l078n2mv-4df7187073f248e919e9a59470855225 {
        max-width: 90%;
    }
}

    No need to add margin left and right auto to mobile since it will inherit those properties. :)

    Best regards,
    Nikko

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