Center headings on mobile view in Dawn

[sunsandstarfish]

Hi! I am trying to center the headings in mobile view on my website. It is centered on desktop view but not on mobile view.

www.sunsandstarfish.com

sowfeu

Thanks!

[PageFly-Kate]

Hi @sunsandstarfish ,

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->/base.css->paste below code at the bottom of the file:

@media screen and (max-width: 740px) {
    .page-width h1 {
        text-align: center !important;
    }
}

I hope it would help you

[sunsandstarfish]

Hi @PageFly-Kate! Thank you for taking the time to reach out. It did not work unfortunately 😞

[PageFly-Kate]

Hi @sunsandstarfish ,

I’m sorry to hear that. Please give it a try with this new solution:

You can paste below code at the TOP of the base.css file:

@media screen and (max-width: 740px) {
    .page-width h1 {
        text-align: center !important;
    }
}

I hope it would help you

[sunsandstarfish]

@PageFly-Kate omg it worked!! Thank you so much!! I really appreciate it!

Any chance you would be able to help me with the footer links? Trying to center the heading and links in the footer! I tried a code earlier but it ends up looking like this where some of the links (under Quick Links) are not centered. It centers on mobile but not on desktop.

[PageFly-Kate]

Hi @sunsandstarfish ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the TOP of the file:

.footer-block {
    text-align: center;
}
.footer-block__details-content>li {
    margin: 0 !important;
}
.footer-block__details-content .list-menu__item--link {
    justify-content: center;
}

I hope it would help you

[sunsandstarfish]

@PageFly-Kate OH MY GOSH!!!!! It worked!! I have been trying to get this to work for literally hours since last night and this morning! I was getting so frustrated. Thank you SOOOOOOO much!

[sunsandstarfish]

Hi @PageFly-Kate!

Any chance you could help me with centering all product info on desktop and mobile view? Right now it looks like price, quantity, variants, personalization are all left aligned. Also is there a way to make the images smaller and appear side by side rather than one big picture and a smaller one underneath? 

https://sunsandstarfish.com/products/valentines-day-tag

This is what I am referring to currently, but I would like to be able to do it for all products I eventually add.

Thank you!!

[PageFly-Kate]

Hi @sunsandstarfish ,

Sorry for the late reply
I checked it looks like you fixed everything

But I see here there are 2 sections that are not centered. Do you want to center it? If you want, you can try this solution:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.pickup-availability-preview {
    justify-content: center !important;
    
}
.share-button__button {
    margin-left: auto !important;
    margin-right: auto !important;
}

I hope it would help you
Best regards,

Kate | PageFly

[sunsandstarfish]

Yes it worked!! Thank you so much I appreciate it 🙂

[sunsandstarfish]

I keep thinking of things to ask you! So sorry! Is there a way to make the variant headers bold? For example on sunsandstarfish.com/products/valentines-day-tag I would like heart color and name color in bold. Also personalization and quantity please. Thank you!! 

[GemPages]

Hello @sunsandstarfish 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body>

<style>
#Option-template--17821541368117__main-0,#Option-template--17821541368117__main-1{
font-weight:bold !important;
}
</style>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[sunsandstarfish]

Hi @GemPages! Thank you for the suggestion. It bolded the variants in the drop down but I actually wanted the variant title to be bold if you would help me with that please! I appreciate it! Thank you 🙂

[PageFly-Kate]

Hi @sunsandstarfish ,

Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product-form__input .form__label {
    font-weight: bold !important;
}

I hope it would help you
Best regards,

Kate | PageFly

[sunsandstarfish]

@PageFly-Kate Yes thank you!!! Do you know how I can make the "Personalization" heading bold? It's a custom liquid. Thank you!

[PageFly-Kate]

Hi @sunsandstarfish ,

Sorry for late reply!

Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

label[for="personalization"] {
    font-weight: bold !important;
}

I hope it would help you
Best regards,

Kate | PageFly

[sunsandstarfish]

Hi @PageFly-Kate yes that worked thank you so much!! I don’t know if you would be able to help me with this also. If I have a product that I do not need personalization for, how can I make it so that specific product doesn’t have a personalization box? I added a custom liquid css in my theme editor but notice it comes up on all the products. Just wondering if there’s a way to keep it for some products and not others or if there is a way to change the label personalization to something else for specific products? I hope that makes sense!! Thanks! 

[PageFly-Kate]

Hi @sunsandstarfish ,

I think you need to know about liquid code, because it needs custom work.
If you know about liquid, you can refer to this way:
Step1: Create tags for each product.
Step2: Edit code -> Section -> /main-product.liquid -> Find the code location of "personalization" section
Step3: Wrap the code in Step 2 in this condition:
{% if product.tags contains 'Tag name you entered in Step 1' %}
Code Here
{% endif %}

I hope it would help you

Best regards,

Kate | PageFly

[sunsandstarfish]

Hi @PageFly-Kate!

So I would like to update my theme to Dawn 8.0 version but I lose all my codes. I know they added a new custom CSS feature to be able to edit style but still be eligible for updates. Some of the codes that you have provided unfortunately give me an error code, is there another way I can add the codes to the custom CSS feature so I can have the same effect and still be eligible for updates? Things I would like to add

- centering headings on desktop and mobile view

- centering footer links on desktop and mobile view

- centering all product info

- bolding variant headers

- adding a personalization box (is it possible to do this without adding a custom liquid?)

- there is a gray box around my logo in the footer. is there a way to remove this? I didn't have a box around it in the old version

Thank you!!