How Do I move my about us page heading? DAWN THEME

Store Design
, ,
1

Hi everyone!

As you can see in the picture down below:

Capture.PNG
Capture.PNG1865×909 62.5 KB

I want to move my ABOUT US page’s header to red colour arrow pointed place, to be accurate I want the heading to be right under the letter “B” in the logo.

How can we achieve this?

URL: https://abbasigems.com/pages/about-us

Password: testingpage

Thank you, I Hope I explained it clearly hehe

Any sources or help are much appreciated!

2

Simonsron_0-1675331674638.png
Simonsron_0-1675331674638.png1920×929 92.9 KB

You can remove page-width–narrow.

Simonsron_1-1675331709859.png
Simonsron_1-1675331709859.png1920×929 77.7 KB

3

@justauser ,

As the with is 72.6Rem

oscprofessional_0-1675331834121.png
oscprofessional_0-1675331834121.png1891×935 98.8 KB

Content will be shifted,

oscprofessional_1-1675331917160.png
oscprofessional_1-1675331917160.png1662×931 79.6 KB

4

Hello @justauser

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

@media screen and (min-width: 990px){
  .page-width--narrow {
    max-width: 116rem;
  }
}

Let us know how it works for you.
Best regards,
GemPages Support Team

5

@GemPages Hi, your code worked but is it possible to add a background color that heading?

something like this:

Capture4.PNG
Capture4.PNG1857×902 63.2 KB

We can add a padding and add background maybe? a padding of 20px for example

6

@justauser

h1.main-page-title.page-title.h0 {
    background: #223;
    padding: 20px;
    color: #fff;
}
7

Hi @oscprofessional would it be possible to do it like this?

Capture98.PNG
Capture98.PNG1979×899 201 KB

where the background covers the sides as well

8 
.page-width.page-width--narrow.section-template--16307667894516__main-padding {
    max-width: 100%;
}
.rte {
    max-width: 622px;
    margin: 42px auto;
}
9

Hi @oscprofessional , I tried the following codes which you gave me as follows:

h1.main-page-title.page-title.h0 {
    background: #223 !important;
    padding: 20px !important;
    color: #fff !important;
}

.page-width.page-width--narrow.section-template--16307667894516__main-padding {
    max-width: 100% !important;
}
.rte {
    max-width: 622px !important;
    margin: 42px auto !important;
}

and this is what it looks like:

Capture.PNG
Capture.PNG1839×903 59.3 KB

so it possible to align right below the “B” in the logo in a fixed place so whatever desktop screen size it is, it stays the same place as the logos placement

10

@justauser ,

You have to do some customization on about-us.liquid template file, need to change the div structure.

1 Like
11

Hi @justauser ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-page.css->paste below code at the bottom of the file:

#shopify-section-template--16307667894516__main {
  overflow: hidden;
  position: relative;
}
#shopify-section-template--16307667894516__main:before {
  content: "";
  background: #010101;
  height: 55px;
  width: 100%;
  position: absolute;
  z-index: -1;
}
#shopify-section-template--16307667894516__main .page-width h1 {
  color: #fff;
}
@media (min-width: 991px) and (max-width: 1200px) {
  #shopify-section-template--16307667894516__main .page-width {
    padding: 0 20px;
  }
}

I hope it would help you
Best regards,

Kate | PageFly

1 Like
12

Thank you so much! @PageFly-Kate

1 Like