This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to customize the text position within Hero Widget

Open 3 replies customizationpluginplugin-widgets-bundle
Darío Ospina Latorre
4 years ago · Last reply by Andrew Misplon 4 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.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 4 years, 15 days ago

    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. Darío Ospina Latorre 4 years, 14 days ago

    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. Andrew Misplon Staff 4 years, 14 days ago

    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.

Have a different question or issue?

Start New Thread