Re: Collection list name in centre of image

Solved

How can I center text on an image while keeping it clickable on Dawn theme?

rogerjet
Excursionist
33 0 3

Hi,

 

On my home page i have a collection list;

 

rogerjet_0-1712809901625.png

I would like to put the text in the center of the image and keep the entire image clickable.

 

I have found some ways of doing it but only the text remains clickable not the entire image and the examples only impact the desktop version of the website the mobile remains the same.

I am using the current Dawn theme 13.0.1

Site preview https://bwmauw3fq1e43euh-69331648824.shopifypreview.com

Thanks for the help.

Accepted Solutions (3)
Raj-webdesigner
Shopify Partner
316 73 74

This is an accepted solution.

Add this Css In your base.css File

.collection-list-wrapper .card__content {
    position: absolute;
    justify-content: center;
    height: 100%;
    align-items: center;
}
.collection-list-wrapper .card.card--standard.card--media {
    position: relative;
    overflow: hidden;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

PageFly-Oliver
Shopify Partner
878 190 175

This is an accepted solution.

Hi @rogerjet ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.card__heading a{
text-align:center !important
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

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

View solution in original post

Raj-webdesigner
Shopify Partner
316 73 74

This is an accepted solution.

This Code Add In base.css file

1) Arrow Remove Code

 

.collection-list-wrapper h3.card__heading span.icon-wrap {
    display: none;
}

 

2) text Bold And Text Color Change For This Code

 

.collection-list-wrapper h3.card__heading a {
    color: white;
    font-weight: bold;
}

if you change Color You Add Your Color In This Above Css In "Color"

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 9 (9)

Raj-webdesigner
Shopify Partner
316 73 74

See This Css I hope This Work Properly

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Raj-webdesigner
Shopify Partner
316 73 74

This is an accepted solution.

Add this Css In your base.css File

.collection-list-wrapper .card__content {
    position: absolute;
    justify-content: center;
    height: 100%;
    align-items: center;
}
.collection-list-wrapper .card.card--standard.card--media {
    position: relative;
    overflow: hidden;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


rogerjet
Excursionist
33 0 3

Hi @Raj-webdesigner 

rogerjet_0-1712832527263.png

Thanks that has worked how I want it.

Sorry for the additional question how can i remove the -> at the end of the text.  And also if I want to change the style (bold) or colour of the text can that be implemented there somehow?

Raj-webdesigner
Shopify Partner
316 73 74

This is an accepted solution.

This Code Add In base.css file

1) Arrow Remove Code

 

.collection-list-wrapper h3.card__heading span.icon-wrap {
    display: none;
}

 

2) text Bold And Text Color Change For This Code

 

.collection-list-wrapper h3.card__heading a {
    color: white;
    font-weight: bold;
}

if you change Color You Add Your Color In This Above Css In "Color"

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


rogerjet
Excursionist
33 0 3

Thanks @Raj-webdesigner 

rogerjet
Excursionist
33 0 3

Hi @Raj-webdesigner 

 

Sorry to disturb you again but for some reason it is not working on mobile device.

I ended up with this code, in the preview it is as expected.  But when published and on mobile back to the original as if the code does not exist.

 

/* added to move text to centre of collection list image */
.collection-list-wrapper .card__content {
    position: absolute;
    justify-content: flex-start;
    left: 5%;
    height: 100%;
    align-items: center;
    }
.collection-list-wrapper .card.card--standard.card--media {
    position: relative;
    overflow: hidden;
    }
.collection-list-wrapper h3.card__heading span.icon-wrap {
    display: none;
    }
.collection-list-wrapper h3.card__heading a {
    /*color: white;  use this to change color of the text*/
    font-weight: bold;
    }

 

  on desktop I have;

rogerjet_0-1712879025367.png

on mobile

 

rogerjet_2-1712879153944.png

 website is swaace.com.au

rogerjet
Excursionist
33 0 3

just some further notes seems to work on Samsung but not Google Pixel or Apple

PageFly-Oliver
Shopify Partner
878 190 175

This is an accepted solution.

Hi @rogerjet ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.card__heading a{
text-align:center !important
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

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

zack_dev
Shopify Partner
75 14 10

hi ,

 

<style>
.card__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    pointer-events: none;
}
</style>

 

this code will solve the purpose note the rule pointer-events:none it will remove the click properties from text and make the image clickable without interference with text.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me