@Ujjaval Also, this coding below works great on both desktop and mobile device, the only problem is that this code affects the other buttons at the home page, not only the buttons at the front picture. It should only work on these two buttons.
Topic summary
A Shopify store owner using the Stiletto Theme needs help removing blank space in the footer on mobile view and customizing button colors on the homepage hero image.
Initial Issue Resolved:
- Blank footer space on mobile was fixed by adding CSS code above
</body>in theme.liquid
Current Challenge:
The user wants different colors for two buttons (primary solid and secondary outlined) on the front hero image only, with different color schemes for mobile vs. desktop:
Mobile: Primary button #46341F with text #A5A487; Secondary button #46341F with text #46341F
Desktop: Primary button #46341F with text #D4D2BA; Secondary button #46341F with text #2D1B1D
Problem:
Provided CSS solutions are affecting all buttons throughout the homepage, not just the hero image buttons. Multiple code iterations have been attempted, but the styling either applies site-wide or doesn’t differentiate properly between mobile and desktop views.
Status: Unresolved. The user is seeking more targeted CSS that only affects the hero image buttons without impacting other buttons on the page, and properly implements different color schemes per device type.
.section-blocks__subheading+:not(.section-blocks) .section-blocks__button {
background-color: green;
}
you want something like this differ colour for the both button
1 Like
@Ujjaval I want different colors for different buttons and devices. The coding should only effect the buttons at the front Image.
I want this on Mobile device:
Primary button color: #46341F
Primary button text: #A5A487
Secondary button: #46341F
Secondary button text: #46341F
I want this on desktop device:
Primary button color: #46341F
Primary button text: #D4D2BA
Secondary button: #46341F
Secondary button text: #46341F
@stinem123
add below code
@media (min-width:768px)
{
.image-hero__text-container .btn.btn--primary.btn--overlay:before {
background-color: #46341F !important;
}
.btn.btn--primary.btn--overlay {
color: #D4D2BA !important;
}
.button-block__button.button-block__button--justify-center.button-block__button--justify-mobile-center.image-hero__text-container-image-button.section-blocks__button {
background-color: #46341F;
}
.btn.btn--secondary {
border-color: transparent !important;
color: #46341F;
}
}
@media (max-width:768px)
{
.image-hero__text-container .btn.btn--primary.btn--overlay:before {
background-color: #46341F !important;
}
.btn.btn--primary.btn--overlay {
color: #A5A487 !important;
}
a.btn.btn--overlay.btn--secondary {
background-color: #46341F;
}
.btn.btn--secondary {
border-color: transparent !important;
color: #D2D1B1!important;
}
}
1 Like
@Ujjaval Does the code work for you? For me the color looks exactly the same on desktop and mobile device?.. So sad, I really want this to work so bad :(((
If i share code for corllabotor request, do yo think you can help better then? If yes, it is 9008
But in this picture you just send - that is not not right colors? and that is also the same for both computer and mobile device, and also affect the other buttons?
It should look like this - The coding should only effect the buttons at the front Image.
On Mobile device:
Primary button color: #46341F
Primary button text: #A5A487
Secondary button: #46341F
Secondary button text: #46341F
On desktop device:
Primary button color: #46341F
Primary button text: #D4D2BA
Secondary button: #46341F
Secondary button text: #46341F
The code must not effect this button down below - or other buttons, that are not on the front Image:
