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

[rogerjet]

Hi,

On my home page i have a collection list;

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.

[Raj-webdesigner · 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;
}

[PageFly-Oliver · 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

[Raj-webdesigner]

See This Css I hope This Work Properly

[Raj-webdesigner · 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;
}

[rogerjet]

Hi @Raj-webdesigner 

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 · 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"

[rogerjet]

Thanks @Raj-webdesigner 

[rogerjet]

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;

on mobile

 website is swaace.com.au

[rogerjet]

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

[PageFly-Oliver · 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

[zack_dev]

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.