Reduce Space

  • Author
    Posts
  • #3199240

    I am using the Sela Theme. I would appreciate knowing the CSS for the following:

    1. reduce the space between the front page widget boxes and the testimonials,

    2. reduce the left and right padding for the overlay box on the home page featured image.

    Thank you! :-)

    The blog I need help with is theaestheticwebdesigner.com.

    #3199364

    wpx2
    Member

    Hello @aestheticwebdesigner

    The following two CSS codes will make the customization you need on your website.

    1 – CSS code for reducing space between the front page widget boxes and the testimonial widgets:

    .front-widget-area, .front-testimonials {
        padding: 3em 55px 0em 55px;
    }

    2- To reduce the left and right padding for the overlay white box on the home page featured image, the following CSS code will do the trick:

    @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
        width: 60% !important;
    }}

    You can increase or decrease the white box size by adjusting the number 60% to your preferences.

    Please let me know if this helps and if you still need extra customization :)

    #3199368

    Thank you for your prompt response.

    Unfortunately, I don’t notice any difference in the space between the boxes and the testimonials.

    As for the overlay box, the top and bottom padding increased as the left and right padding decreased. Go figure.

    Thanks for trying though.

    #3199611

    wpx2
    Member

    Hi @aestheticwebdesigner

    Can you please try to force refresh your browser to clear up any old cache.

    For the space between the boxes and testimonials widgets, please check the two pictures below to see how the CSS code affected your website.

    1- First picture is showing how much the space between the boxes and the testimonials widgets before using the custom CSS:

    2- The second image is showing how the CSS code affected your website and removed the bottom padding from the boxes so now testimonials are more close to the boxes:

    If you want less space between the testimonials and the boxes, I can give you a CSS code that will decrease that space more.

    Regarding the overlay white box, I have just tried to use the code again and it seems to be working. Please take a look at the bottom image:

    Can you please place both CSS codes in your website’s customizer and force refresh your browser?

    #3199732

    Thank you for responding again. That is kind of you.

    I had cleared the cache of all my browsers before I responded to you, and I noticed nothing, but I did keep the coding for the space between the two elements in the customizations section. Lo and behold, the next day, I noticed a difference. Not sure how that happened.

    As for the coding of the overlay box, there must be some misunderstanding. The picture you show me has an extremely wide box. I’m trying to reduce the space, not increase it. I just tried the css again, and it still increases the width and lengthens the box’s height.

    At this link, you can see my mockup and how I’m trying to achieve a bit more blue-green space between the flowers and the overlay box.

    https://wp.me/P6sjKs-k3

    #3199990

    wpx2
    Member

    Hi @aestheticwebdesigner

    Opps! my bad, I misread your request. I thought that you wanted to increase the size of the overlay white box.

    To reduce the width size of the overlay white box, please use the following CSS code:

    @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
        width: 25% !important;
    }}

    If the box is too small, just change 25% to a bigger number.

    Please let me know if this fixes the issue. :)

    #3199996

    There we go! We’re cooking with gas!

    Thank you so much. That is absolutely perfect. (I had to change the width to 35%.)

    Thank you for your persistence.

    #3200000

    wpx2
    Member

    Hi @aestheticwebdesigner

    You are welcome :) . I am happy that I could help.

The topic ‘Reduce Space’ is closed to new replies.