Home>Support>How to customize the text position within Hero Widget

How to customize the text position within Hero Widget

Hello, I used a Hero Widget for my website http://dario-ospina.com/
I’ve been trying to set a left margin over the text because I don’t want it to be in the center of the image.
I tried hard coding the margin over the class “.sow-slider-image-wrapper” but it doesn’t work. On the Theme File Editor can’t find where to modify it. I appreciate if you can help me figure this out.

Thanks in advance.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 months, 25 days ago Andrew Misplon Hi, I Work Here

    Hi Darío

    Thanks for reaching out.

    Perhaps you could wrap your text in a div and then target it with Custom CSS. Within the Hero in the Text tab:

    <div class="d-hero-text">
        <h1>Hi</h1>
    </div>

    Then at Appearance > Custom CSS or Appearance > Additional CSS:

    .d-hero-text {
        margin-left: 50px;
    }

    If you don’t want the margin on mobile devices then wrap the above CSS rule in a media query.

  2. 4 months, 25 days ago Darío Ospina Latorre

    Hello Andrew, thank you so much for your help.

    I tried that but the new div gets embedded into the parent/existing one and adpots its size :/

  3. 4 months, 25 days ago Andrew Misplon Hi, I Work Here

    Sure, no problem. Try adding a max-width value to your div in Custom CSS.

    https://www.w3schools.com/cssref/pr_dim_max-width.asp

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More