Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 16, 2021 at 5:33 pm #1333158
    mistermagoo8691

    Hi folks.

    I’d like to reduce the empty space abobe and below an image that I am using on top of my “coming soon” page (I am not using the “header”).
    I assigned to the “image” component a custom CSS class (logo_comingsoon), and I tried to reduce the space above and below the image using this .CSS, adapting an hint I’ve found in this support forum:

    .logo_comingsoon {
    padding-top: 1px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding-bottom: 7px !important;
    }

    It does not work at all, the space is not reduced. The strange thing is that it works if I want to increase the space (e.g. if I replace 1px with 10px, the space gets increased).

    Can you please help me?

    Thanks!
    Bye,
    A.-

    December 17, 2021 at 7:35 am #1333206
    Rikard

    Hey Angelo,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-2297 main.content {
    padding-top: 0;
    padding-bottom: 0;
}

    Best regards,
    Rikard

    December 17, 2021 at 11:50 am #1333247
    mistermagoo8691

    Thanks RIkard, of course it works :-)

    I am not a CSS expert, as you can imagine, and based on what I learned I thought I had to precisely target the element for which I wanted to change the style (= the image). I know this goes out of your duties here, though, therefore I will understand if you’ll skip the question :)
    Could you please/kindly explain to me how did you deduce that you had to act on the main.content of the body, rather than applying the style to the image only?

    I know this goes out of your duties here, though, therefore I will understand if you’ll skip the question :)

    Thank you so much!
    Bye,
    A.-

    December 18, 2021 at 4:25 am #1333311
    Rikard

    Hi,

    It’s a bit difficult to explain, but I basically targeted the main element on that specific page, since there was padding added to that. So I targeted the container element, not the actual image. If you want to get better at CSS, then I would suggest that you learn how to inspect the code in your browser, so that you can see the DOM tree. If you learn how to do that, then it quite easy to see which element is applying to extra space above and below the image.

    Best regards,
    Rikard

    December 20, 2021 at 2:47 pm #1333541
    mistermagoo8691

    Thanks Rikard! I will dive into it :)

    December 21, 2021 at 7:36 am #1333600
    Rikard

    Hi,

    Great, best of luck to you :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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