Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 25, 2024 at 7:18 pm #1438299
    TBant

    HI

    I’m new to this type of stuff but I’ve tried to see what I’m doing wrong and completely stumped.

    I have a color section and have added a background image.
    I want to add background-size:cover; to the style.
    I gave my color section the CSS ID section-container-width as per Enfold documentation

    code below

    I’ve also tried #section-container-width .avia-section { in case this worked and it didn’t.

    My site is just on localhost so unfortunately I can’t share.

    The code works when I use google inspect tool, find where ….png is reference on the background image and adding it there. But I want to be able to make a custom class like this and add in quick css but can’t seem to figure it out.

    `/* Color section container width */
    #section-container-width .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background-size: cover;
    }

    #section-container-width .avia-section {
    background-size: cover !important;
    }

    Thanks

    March 26, 2024 at 7:33 am #1438324
    Ismael

    Hey TBant,

    Thank you for the inquiry.

    You can set the Styling > Background Image > Background Repeat to Stretch to fit, which is the same as manually setting the background-size property to cover.

    Best regards,
    Ismael

    March 26, 2024 at 9:15 am #1438330
    TBant

    thanks that worked. but do you know why I’m having difficulties with the custom classes? There have been other occasions where this hasn’t worked. If I want change padding of a text field, it is correct to add a custom class i.e. “review-text” and then in quick css add .review-text {font-size: 12px !important;}?

    March 26, 2024 at 9:45 am #1438332
    TBant

    An example…

    I have the below code which is working.

    .hero-text {
    text-align: center;
    text-shadow: 2.5px 2.5px 0px #000000;
    }

    (THIS WORKS)

    However I have a subheading within the “hero-text” so I just want to adjust the H1 child.

    .hero-text .h1 {
    font-size: 3em !important;
    font-weight: 1000 !important;
    }

    (THIS DOES NOT WORK)

    Why does the second not work and how do I resolve this? Other than creating two text blocks. I’m trying to work out where I am going wrong with my logic so I can fix for myself in future :)

    March 26, 2024 at 10:48 am #1438336
    Mike

    Hi,
    This is due to css specificity so typically the h1 has a added class for color & font like .main_color h1 so to over ride this your css should be like .main_color .hero-text h1, an easy way around this is to add the ID #top to any css you are having trouble with like #top .hero-text h1.
    If you have further trouble try making a live site and link to your page so we can examine the classes used in your situation.

    Best regards,
    Mike

    March 26, 2024 at 9:32 pm #1438378
    TBant

    Thank you Mike, appreciate the explanation! It worked

    March 26, 2024 at 11:36 pm #1438383
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Struggling to add custom css (it doesn’t work!)’ is closed to new replies.