How can I optimize my online store for desktop view?

[Jferguson1]

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,

https://www.tryy.co.uk 

password - help

[websensepro]

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

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

Thanks!

[Jferguson1]

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

 

[websensepro]

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

[Jferguson1]

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

Thanks

[websensepro]

Code is working fine? @Jferguson1 

Please Like and Mark it as a solution.
Thanks

[Jferguson1]

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]

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!

[Jferguson1]

Hi,

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

password - help