Warehouse Theme Blog page text formatting

Solved
Lotta-Lite
Tourist
10 0 5

Hi All, 

I am in need of changing the alignment of the "Tags" text at the top of our blog page. Right now the text looks like it is justified and has WAY too much space in between categories. I have looked at the Theme Customization, and the Blog Post tab and have not found a way to do this. Can anyone help me fix this without having to edit the liquid theme? (If someone has already asked this please let me know. I couldn't find an answer searching through previous questions myself.)

Here is a snip it of what it look like right now. I would prefer this be left aligned and below the blog post listings instead of justified and above blog post listings.Screen Shot 2021-01-26 at 11.17.54 AM.png

Here is what the entire page looks like...work in progress...

Screen Shot 2021-01-26 at 11.24.47 AM.png

Accepted Solutions (2)

Accepted Solutions
KetanKumar
Shopify Partner
31508 3141 10542

This is an accepted solution.

@Lotta-Lite 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.page__tag-item {margin: 0;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
31508 3141 10542

This is an accepted solution.

@Lotta-Lite 

Yes, please add this code

.page__tag-item::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 100px;
    top: 5px;
    left: 6px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 14 (14)
KetanKumar
Shopify Partner
31508 3141 10542

@Lotta-Lite 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5
Thank you KetanKumar!

Shopify store is lotta-lite.myshopify.com
KetanKumar
Shopify Partner
31508 3141 10542

sorry i can't see bog page url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5
Lotta-Lite
Tourist
10 0 5
KetanKumar
Shopify Partner
31508 3141 10542

This is an accepted solution.

@Lotta-Lite 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.page__tag-item {margin: 0;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5
Awesome Ketan! It definitely looks better now. Much appreciated! Is there a
way I can put a spacer object in between each tag? Like a *•* or
*l ?*
KetanKumar
Shopify Partner
31508 3141 10542

@Lotta-Lite 

it's my pleasure to help us

where do you have to add this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5

In between the tag phrases. spacers are nice to break up text. This is just the option key + 8 bullet point (mac) Like below:

 

Screen Shot 2021-01-27 at 9.13.05 AM.png

KetanKumar
Shopify Partner
31508 3141 10542

@Lotta-Lite 

is this fine?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5

The picture I send in the previous reply was just a mock up I did in Adobe InDesign to show an example of what I'm trying to do. Sorry for the confusion. I would like to have those spacers in the website blog page if this is possible.

KetanKumar
Shopify Partner
31508 3141 10542

This is an accepted solution.

@Lotta-Lite 

Yes, please add this code

.page__tag-item::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 100px;
    top: 5px;
    left: 6px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lotta-Lite
Tourist
10 0 5

Thank you so much Ketan! 8px was a little big, but I brought the size down to 4px and it looks great! I appreciate all of your help and your quick and easy solutions! 🙂

 

Here is what it looks like now:

Screen Shot 2021-01-27 at 10.33.07 AM.png

KetanKumar
Shopify Partner
31508 3141 10542

@Lotta-Lite 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing