Size issues with the image in image with text overlay

ASHWIN_BIYANI
Tourist
11 0 0

Hey I am getting an image size issue in the mobile view of my website, while in the desktop view its proper so can the support help me this issue.

i have attached the images for reference. Capture.JPGWhatsApp Image 2021-08-04 at 14.41.10.jpeg

0 Likes

Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url  where you want to do modification, so that I will solve your issue here!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
ASHWIN_BIYANI
Tourist
11 0 0

https://vedicspoons.com/ 

this is my websites live link and i had a option if i change or replace an image then the settings which are gonna do i need to do it again? 

also when i will be applying the code/ solution will it change the images size of whole all in my website?

0 Likes
@media only screen and(max-width:480px){
.hero.hero--medium.hero__overlay.box.ratio-container.js.lazyloaded{
	    background-size: 100%;
    background-position: center;

}
h2.h1.mega-title {
    font-size: 13px;
}
.mega-title {
    margin-bottom: 0;
}
}


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
ASHWIN_BIYANI
Tourist
11 0 0

i tired the code but its the same in the mobile view the image is getting cropped 

0 Likes
bracknelson
Excursionist
42 0 4

Optimized the image or take the help of any designer or coder.

0 Likes
ASHWIN_BIYANI
Tourist
11 0 0

As per the image size i already have optimised it but on the phone view its not proper thats the issue i am facing

0 Likes

If you have already this media then no need add extra

@media only screen and(max-width:480px){

add cs in it...

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

 

@media only screen and(max-width: 320px){
.hero__inner {
    padding: 12px;
}
.hero.hero--medium.hero__overlay.box.ratio-container.js.lazyloaded {
    background-size: contain;
    height: auto;
    background-position: center center;
}
h2.h1.mega-title {
    font-size: 18px;
}
}

 

try this

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
ASHWIN_BIYANI
Tourist
11 0 0

not the cs coding i meant that for image resolution 

0 Likes