Shopify themes, liquid, logos, and UX
Hi there,
I've optimised my store for mobile and I need help optimising it for desktop.
This will entail reducing the size of the video and positioning it on the right of the screen.
This is how I'd like my desktop homepage to look:
If anyone can provide advise I'll be greatly thankful,
password - help
Hi @Jferguson1,
.image-with-text__content .image-with-text__text+.button {
margin-top: -3rem !important;
margin-left: -5rem;
}
image-with-text__media img{
margin: 53px 0px;
}
@media screen and (min-width: 750px)
.grid--2-col-tablet .grid__item {width: calc(0% - var(--grid-desktop-horizontal-spacing) / 2) !important;
}
section#shopify-section-template--21069259473236__custom_liquid_xUdkJK{
background: #dddcdd !important;
}
section-template--21069259473236__custom_liquid_xUdkJK-padding video {
width: 80% !important;
float: right;
height: 70vh !important;
display: block;
margin: 0 auto;
}
.section-template--21069259473236__image_with_text_mNek7b-padding.gradient.color-scheme-a2999bb8-bfc3-412f-bfe8-3bdff5efbd2b{
background: #dddcdd !important;
}
Kindly review the modifications I've made to the code. Here is the current presentation following the addition of the code:
Thanks!
Thanks for getting back to me,
I've added the code at the end of the base.css file but nothing seemed to change:
Did I insert the code in the right place?
Many thanks, Joe
Yes, Here is the updated code for your review.
.image-with-text__content .image-with-text__text+.button {
margin-top: -3rem !important;
margin-left: -5rem;
}
image-with-text__media img{
margin: 53px 0px;
}
@media screen and (min-width: 750px)
.grid--2-col-tablet .grid__item {width: calc(0% - var(--grid-desktop-horizontal-spacing) / 2) !important;
}
section#shopify-section-template--21069259473236__custom_liquid_xUdkJK{
background: #dddcdd !important;
}
section-template--21069259473236__custom_liquid_xUdkJK-padding video {
width: 80% !important;
float: right;
height: 70vh !important;
display: block;
margin: 0 auto;
}
.section-template--21069259473236__image_with_text_mNek7b-padding.gradient.color-scheme-a2999bb8-bfc3-412f-bfe8-3bdff5efbd2b{
background: #dddcdd !important;
}
Hi - It doesn't seem like that has completed either.
Thanks
Code is working fine? @Jferguson1
Please Like and Mark it as a solution.
Thanks
Is it showing it working fine on your screen? as i have saved the code to the base.css and it is not reloading with the changes.
<style>
.image-with-text__content .image-with-text__text+.button {
margin-top: -3rem !important;
margin-left: -5rem;
}
image-with-text__media img{
margin: 53px 0px;
}
@media screen and (min-width: 750px)
.grid--2-col-tablet .grid__item {width: calc(0% - var(--grid-desktop-horizontal-spacing) / 2) !important;
}
section#shopify-section-template--21069259473236__custom_liquid_xUdkJK{
background: #dddcdd !important;
}
section-template--21069259473236__custom_liquid_xUdkJK-padding video {
width: 80% !important;
float: right;
height: 70vh !important;
display: block;
margin: 0 auto;
}
.section-template--21069259473236__image_with_text_mNek7b-padding.gradient.color-scheme-a2999bb8-bfc3-412f-bfe8-3bdff5efbd2b{
background: #dddcdd !important;
}
</style>
Thanks!
Hi,
I have inserted the code - please look at the homepage to view what I'm seeing https://www.tryy.co.uk
password - help
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025