How can I optimize my online store for desktop view?

Store Design
, , ,
1

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
Jferguson1_0-1710495875917.png400×250 42.7 KB

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

https://www.tryy.co.uk

password - help

2

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
websensepro_1-1710498080370.png296×599 11.1 KB

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
websensepro_0-1710498005471.png1361×549 116 KB

Thanks!

3

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
Screenshot 2024-03-15 at 10.29.30.png2880×1800 627 KB

Did I insert the code in the right place?

Many thanks, Joe

4

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

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

Thanks

Screenshot 2024-03-15 at 10.37.28.png
Screenshot 2024-03-15 at 10.37.28.png2880×1800 638 KB

6

Code is working fine? @Jferguson1

Please Like and Mark it as a solution.
Thanks

7

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.

8
  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.

Thanks!

9

Hi,

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

password - help