Hi all,
How do I remove the content color or at least change it for the title of a product (within collections page and/or main content block - NOT the description of the item in product details)
Screenshot below shows what I mean - there is black box behind the white title - I wish to make it transparent.
@DeadEndStreet
Please share your store URL!
Thanks!
1 Like
Hi there.
Store URL is: deadendstreet.co.uk
Thank you
1 Like
@DeadEndStreet
Add code Your assets/theme.scss.liquid bottom of the file.
.product-card__info {background-color: transparent !important;}
Thanks!
1 Like
Awesome - thanking you so much.
Is there a way of moving the title close to the picture - moving it up?
1 Like
@DeadEndStreet
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.product-card__info { bottom: -22% !important;}
}
1 Like
One amazing individual!! Many thanks
I don’t suppose you would know how to make my collection page header transparent would you?
All my other pages everywhere are transparent but on both mobile view and desktop the collection page header isn’t - not sure why.
The big white space above main menu
@DeadEndStreet
ok Please wait ! i will send you solution.
Thanks!
Awesome, thank you - you can see I have that black background block within the collection page also - I had removed that elsewhere but thought it would also have been removed here.
@DeadEndStreet
Add code Your assets/theme.scss.liquid bottom of the file.
.template-list-collections .featured-card {
border-color: transparent !important;
background-color: transparent !important;
}
@media only screen and (min-width: 750px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
1 Like
@DeadEndStreet
also add following css
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
}
1 Like
You are truly amazing at this, honestly everything you have sent has been spot on and works without complication - brilliant thank you.
This may be a little more confusing - all headers are now transparent on both mobile and desktop but my logo is present on them all except for the collections page on mobile - not sure why, maybe it is something I have done/changed - see below:
The logo is or needs to be in the big blank space at the top - it is everywhere else - I guess this could be more complicated.
1 Like
@DeadEndStreet
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections .site-header { z-index: 9;}
}
1 Like
@DeadEndStreet
also add following css for mobile
@media only screen and (max-width: 749px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
@media only screen and (max-width: 749px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
z-index: 9;
}
}
1 Like
Absolutely faultless!!!
This - you are very clever. Thank you.
This is more of a question I suppose as the top title is a separate header section but see below from my pages (footer, about us etc).
On all pages the header in this case “Dead End Street” is quite a distance away from the start of the narrative underneath particularly on mobile view (as there is no main menu bar etc)
Do Shopify allow us to somehow move the header down and/or the narrative up? Ideally it would be great if they could let us move the header text down on the mobile view as it is very close to logo (and move narrative up) and also move narrative up on desktop.
Not sure there would be a fix for this
@DeadEndStreet
Hey not clear to me what do want to you Please share screenshot i will check and send solution to you.
Thanks! welcome again
Sorry I forgot the screenshot.
See below - on the mobile view - I think the title “Dead End Street” is too near the logo and the text underneath is to far away from the title.
On desktop view the text underneath is also too far down away from the title.
@DeadEndStreet
can you share the URL please?