How can I optimize my online store for desktop view?

Jferguson1
Explorer
80 3 6

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:

 

Jferguson1_0-1710495875917.png

 

If anyone can provide advise I'll be greatly thankful,

 

https://www.tryy.co.uk 

password - help

 

Replies 8 (8)

websensepro
Shopify Partner
1011 139 147

Hi @Jferguson1,

  1. Go to Shopify Admin > Online Store > Themes.
  2. Click "Actions" > "Edit code" on your theme.
  3. Open base.css.
  4. Paste the provided code at the end of the base.css file.

 

 

.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;
}

 

 

 

websensepro_1-1710498080370.png

Kindly review the modifications I've made to the code. Here is the current presentation following the addition of the code:

 

websensepro_0-1710498005471.png


Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Jferguson1
Explorer
80 3 6

Thanks for getting back to me,

 

I've added the code at the end of the base.css file but nothing seemed to change:

 

Screenshot 2024-03-15 at 10.29.30.png

 

Did I insert the code in the right place?

 

Many thanks, Joe

websensepro
Shopify Partner
1011 139 147

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;
}

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Jferguson1
Explorer
80 3 6

 Hi - It doesn't seem like that has completed either.

Thanks

 

Screenshot 2024-03-15 at 10.37.28.png

websensepro
Shopify Partner
1011 139 147

Code is working fine? @Jferguson1 

Please Like and Mark it as a solution.
Thanks

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Jferguson1
Explorer
80 3 6

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.

websensepro
Shopify Partner
1011 139 147
  1. Go to Shopify Admin > Online Store > Themes.
  2. Click "Actions" > "Edit code" on your theme.
  3. Open theme.liquid.
  4. Paste the provided code at the top of the theme.liquid file.
<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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Jferguson1
Explorer
80 3 6

Hi,

 

I have inserted the code - please look at the homepage to view what I'm seeing https://www.tryy.co.uk

password - help