Debut Theme: Mobile Image scaling and background color

Highlighted
Tourist
7 0 2

Hi,

My website is https://velocityboutique.com/ for reference.

I am hoping someone can solve a few problems that I have. First of all, I am using the debut theme and I would like to make my mobile image appear like the desktop image (please see below). It looks good on the desktop but it is distorted on mobile.

 

Desktop look: 

Kelsey_Zastrow_0-1603766159313.png

 

How it looks on mobile:

Kelsey_Zastrow_1-1603766188778.png

 

If someone knows how I can edit the code so the whole image will appear on mobile, that wold be great.

 

In addition, I would like for the below section of my homepage to have the background color #f3f3f3 but I cant quite figure out how to edit that.

Kelsey_Zastrow_2-1603766416444.png

 

I would also like to change the background color of my footer. If anyone can help me with any of these issues  I would appreciate it! Let me know if you need any additional information.

 

Thanks!

 

Highlighted
Shopify Partner
9272 1180 3266

@Kelsey_Zastrow 

Thanks for post

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-160376183084c7a7cf {
    padding: 0;
.hero--medium {
    height: auto;
}
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
2 0 1

I'm having a very similar problem my background is scaling on IOS too big. 


body {
background-image: url({{ 'background.jpg' | asset_url }});
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

this is the code I used for my background

Highlighted
Shopify Partner
9272 1180 3266

@maria141 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
2 0 1

tandemphantom.com

 

The background either looks perfect on the computer and then zooms in way too much on the phone. 

or

It tiles and repeats. The dimensions is correct. please help

0 Likes
Highlighted
Shopify Partner
9272 1180 3266

@maria141 

let me know which section do you have issue

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes