Center headings on mobile view in Dawn

sunsandstarfish
Excursionist
17 0 4

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!

Replies 18 (18)

PageFly-Kate
Shopify Partner
1044 315 308

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

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

PageFly-Kate
Shopify Partner
1044 315 308

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;
    }
}

PageFlyKate_0-1675094823530.png

 

I hope it would help you

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

@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.

 

Screen Shot 2023-01-30 at 8.03.20 AM.png

PageFly-Kate
Shopify Partner
1044 315 308

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;
}

PageFlyKate_0-1675097198871.png

 

I hope it would help you

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

@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
Excursionist
17 0 4

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
Shopify Partner
1044 315 308

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

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

sunsandstarfish
Excursionist
17 0 4

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
Shopify Partner
5588 1261 1203

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
sunsandstarfish
Excursionist
17 0 4

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
Shopify Partner
1044 315 308

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

@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
Shopify Partner
1044 315 308

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

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
Shopify Partner
1044 315 308

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sunsandstarfish
Excursionist
17 0 4

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!!