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

How to customize the text position within Hero Widget

By Darío Ospina Latorre, 2 years ago. Last reply by Andrew Misplon, 2 years ago.

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. 2 years, 7 months 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. 2 years, 7 months 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. 2 years, 7 months 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