Image On Theme Body Pixelated On Mobile

blah12325
New Member
4 0 0

Hello all! This is my first post on the forum, and I have scoured to ends trying to figure a solution but will explain what the problem is first; 

I am using a third party theme on a shopify website, and all is perfect except one small issue, when on mobile one of the banner images becomes super pixelated. 

-the theme is called rubix
-preview link here

It seems the solution would be to add in a portion that just disables the part of the theme that this scrolling background image is on (as you scroll the banner image stays static), but implementing something like this in theme.scss.liquid seems to not be working. 

@media only screen and (max-width: 749px){
#shopify-section-1576065013508 .container div:nth-child(1) {
    display: none;
}
}

I am very new to doing anything related to coding, but I presume one of the issues is that I need to figure out which shopify section I am calling on, and that is based on a pre-existing directory which was created within the theme itself by the theme developer? 

Any help would be greatly appreciated!

Replies 6 (6)
Zworthkey
Shopify Partner
2571 309 641

Hii, @blah12325 
Can you give me a screenshot of your problem so,
I can solve it.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
blah12325
New Member
4 0 0

unnamed.jpeg

 

Here you go!

Zworthkey
Shopify Partner
2571 309 641

Hii, @blah12325 
Paste this code on top of the theme.scss file.

.velaBannerText.style1.mbGutter.bg_parallax.bg_image {
    background-image: none !important;

}

Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
blah12325
New Member
4 0 0

That's amazing @Zworthkey thank you! is it possible to make the "background none" function just on the mobile version? the background image displays properly on full screens

marcoswatanabe
Shopify Partner
37 4 9

 

Here is your code working on mobile only:

@media only screen and (max-width: 749px){
  .velaBannerText.style1.mbGutter.bg_parallax.bg_image {
      background-image: none !important;
  }
}

 

If my answer was helpful then please Like and Accept Solution :)
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
blah12325
New Member
4 0 0

Thank you so very much! You rock guys!