Add space above the page title - Vantage Theme

Solved

Hi there,

 

I've been trying all options (that I could find) and can't figure out what I'm doing wrong. I want to add some space to the top of the page title ( https://dwwindowsystems.co.nz/pages/residential-joinery) and have tried the following things with different section IDs:

 

div#shopify-section-page-section-page-custom-four-1 {
padding-top: 50px;
padding-bottom: 0px;
}
body.page-custom-four .page-section-page-custom-four-1 {
    padding-top: 50px;}

I've used these codes before so I might just be using the wrong section ID but I can't figure out which one it is!

Hope someone can point me in the right direction, thanks so much!

0 Likes

If you PM me the password to your store (not admin!) I can take a look.

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes

Success.

Ok, you can target the heading tag explicitly:

 

.page-title h1 {
    margin-top: 50px;
}

Regards,

Tom

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like

Thanks a lot Tom, that did the trick! 

 

Would you happen to know how I can get the same line underneath the page titles as underneath "New Zealand's Leading Aluminium Window & Door Specialists" on  https://dwwindowsystems.co.nz/?  Thanks a lot for taking a look!

0 Likes

Yeah, no worries.

 

Just add a few more rules to the last selector:

.page-title h1 {
    margin-top: 50px;
    border-bottom: 2px solid 
    #ebebeb;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like

You're amazing! Thanks so much!


I'm seeing it on the pages that I used a custom template for but not on the standard pages itself. I tried copying it in here between <style> tags but that did not work, is there a way around this?

 

Thank you!

<div id="page" class="{% if section.settings.reduced-width %}desktop-8 desktop-push-2{% else %}desktop-12{% endif %} tablet-6 mobile-3">
  <h1>{{ page.title }}</h1> 
  <div class="rte">
    {{ page.content }}
  </div>
</div>
{% schema %}
{
"name": "Page template",
"settings":
	[
      {
        "type": "checkbox",
        "id": "reduced-width",
        "label": "Reduce page width"
      }
	]
}
  {% endschema %}
0 Likes

Success.

Each of the different types of pages has slightly different markup, so you will have to adjust the css selectors to include the headings on the 'standard pages'.

 

This should do it:

.page-title h1,
#page > h1 {
    margin-top: 50px;
    border-bottom: 2px solid 
    #ebebeb;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

Regards,

Tom

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like

Thank you @LittleVentures seems to work all great now! Merry xmas :)

0 Likes