Home>Support>Masthead Adjustment

Masthead Adjustment

By Jennifer Brookman, 9 years ago. Last reply by Jennifer Brookman, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi there… I have built our website using the Vantage Theme and PageBuilder. I need the Masthead to include two logos along with the event’s name. I accomplished this by adding a Layout Builder Widget to the home page, which is based on 1 row, 2 columns and the widgets “Text” and “SiteOrigin Image”.

The challenge I’m having is that I want the “Text” to be centered between the two logos and yet I can’t get it to move over — it seems to be hitting a barrier on its left that I can’t overcome.

Do you have any suggestions?

The site url is www.giantsheadgrind.com

Thanks.

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

  1. 9 years, 5 months ago Lucas Tolle

    Hello, Jennifer Brookman

    Go the right tab of Widgets (text as well as image) and look for the field where insert CSS. Then, you paste this code, save the page and tell me what you did.

      border: 1px solid #333;

    From there, I’ll send a complete code. Because the code I sent you initially going to tell me me where div I must change. And currently, the everything is crooked.

    Enter the code in the widgets I’m waiting …

    Lucas Tolle

  2. 9 years, 5 months ago Jennifer Brookman

    This has been done. And it is ugly! :)

  3. 9 years, 5 months ago Lucas Tolle

    Giants Head Grind Christopher Walker Memorial Race

    That’s how I see when I put the edges.
    I was wanting you to do the same to see if I was in the same div.

    I will try to do some trick to adjust it.

  4. 9 years, 5 months ago Jennifer Brookman

    Great! Standing by…

  5. 9 years, 5 months ago Lucas Tolle

    Giants Head Grind Christopher Walker Memorial Race

    Link: https://siteorigin.com/wp-content/uploads/2016/01/Giants-Head-Grind-Christopher-Walker-Memorial-Race.png

  6. 9 years, 5 months ago Lucas Tolle

    Please delete all that text and paste this code in place of the text.

     <div class="textwidget address-event-giants">Giants Head Grind | Christopher Walker Memorial Race


<p class="dateevent-giants">Saturday, May 21, 2016

</div>

<style>
.textwidget.address-event-giants {
    text-align: center;
    border:1px solid red;
}
.textwidget.date-event-giants {
	text-align: center;
    border:1px solid red;
}
</style>

    In a little while you send all the final code.

  7. 9 years, 5 months ago Jennifer Brookman

    I have done this within the Text Widget. Next step?

  8. 9 years, 5 months ago Lucas Tolle

    Jennifer, I apologize for the delay.

    I live in Brazil. And in my city is in periods of rains. And Just when I was going to send you the code, lacked electricity.

    Only reached power and internet connection this morning. So I’ll prepare send you the code.

    Lucas Tolle

  9. 9 years, 5 months ago Lucas Tolle

    Please delete all and paste this code in place of the text.

    <div class="textwidget address-event-giants">Giants Head Grind | Christopher Walker Memorial Race


<p class="date-event-giants">Saturday, May 21, 2016

</div>

<style>
.textwidget.date-event-giants {
  text-align: center;
  width:400px;
  border:none!important;
}
.address-event-giants {
    text-align: center;
    border:none;
}
.date-event-giants p {
	text-align: center;
    border:none;
     font-weight: bold;
}
.date-event-giants  {
	text-align: center;
    border:none;
     font-weight: bold;
}
div#header-sidebar {
    width: 100%;
    border:none;
}
#pgc-w56abff1dc3de1-0-1 {
    width: 150px!important;
    float: right!important;
}

#pgc-w56abff1dc3de1-0-0 {
    width: 62.978%;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -0.04em;
    padding-top:10px;
	margin-left: 47px;  
}

#masthead .hgroup #header-sidebar aside.widget:last-child {
    margin-right: 0;
    bottom: 35px;
}	

aside#siteorigin-panels-builder-2 {
    width: 50%;
}

.so-widget-sow-image-sow-image-b5a0057b6480 .sow-image-container {
    text-align: center;
}

#pg-w56abff1dc3de1-0 .panel-grid-cell {
    padding-left: 15px;
    padding-right: 13px;
    height: 144px;
}

#pg-w56abff1dc3de1-0 {
    margin-left: -15px;
    margin-right: -109px;
}
</style>

    Ask and tell me if it was successful!

  10. 9 years, 5 months ago Jennifer Brookman

    Hi Lucas… no problem. Amazing that I am sitting here in Canada working with someone from Brazil!

    I have pasted the code into the CSS of the text widget. Definitely a change but not quite right yet… you can see it on the live site. Suggestions?

  11. 9 years, 5 months ago Jennifer Brookman

    Hi again. I decided to go a different direction with the Masthead and removed the widgets completely. The fact that even someone who knows and understands CSS was having the same challenges that I was led me to believe it wasn’t the right way to go.

    Thanks anyway for all of your help.

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