Hello, I am trying to resolve an issue where the image at the top of the site (watercolour style art at the top of the page/site) gets cropped when viewed on phones/mobile devices. This unfortunately causes two of the members of the group to get cut out of the photo when viewed on mobile. Is there a way to have the full width of the image forced into view on mobile? Thanks, Joe
Hi there, I added the code as suggested and I also edited the images so the desktop version is 1920x1040 like the sample in the template and the mobile version is 960x520 but it the image is still being cut-off in both instances. Can you help?
I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.
P.S. I would appreciate if you could please rate the Theme and like the assistance under my support, means a lot to me. Thank you.
You can rate it with your themeforest account at your downloads page, precisely at this link: http://themeforest.net/downloads and hover over the 5 stars for our theme.
Hello,
I am trying to resolve an issue where the image at the top of the site (watercolour style art at the top of the page/site) gets cropped when viewed on phones/mobile devices. This unfortunately causes two of the members of the group to get cut out of the photo when viewed on mobile. Is there a way to have the full width of the image forced into view on mobile?
Thanks,
Joe
Hello,
Please use this code:
@media (min-width: 768px){ .intro { height: 466px; min-height: 466px; }}Best Regards,
Jelly Team
Thank you for responding. I placed it in the "introslider.css" file under here:
---
.fill {
max-width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
@media (min-width: 768px){ .intro { height: 466px; min-height: 466px; }}
---
Is that the correct location? The slider image still isn't responsive when tested on my end (iPhone 12 Pro, iPhone X and iPhone 12)
Attached files: IMG_8FE5C2E227EC-1.jpeg
Screenshot 2023-10-12 at 7.40.15 PM.png
Try this code instead:
@media (max-width: 960px) .intro { height: 420px; min-height: 420px; }Best Regards,
Jelly Team
There is no change on mobile with this code. Did I put the code in the correct place? I placed it in the "introslider.css" file under here:
.fill {
max-width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
@media (max-width: 960px) .intro { height: 420px; min-height: 420px; }
Could you please send us wp-admin login/password and website url as a private message?
Best Regards,
Jelly Team
When I logged-in I only see this: see attach. Could you check?
Attached files: Screenshot 2023-10-15 at 21.36.54.png
Best Regards,
Jelly Team
I added the code to http://newworldson.com/new_site/styles/main.css, but it still shows the old version of the file. Is there some kind of cache on the server that needs to be cleared?
Best Regards,
Jelly Team
Sorry about that. I couldn't figure out what was causing this and then noticed that I didn't add {}:
https://jellythemes.ticksy.com/ticket/3497303/#comment-18551311
I should work now: see attach. Please try checking it in Incognito Mode.
Can the page be setup so that mobile displays a different image than the desktop?
Are you referring to the top main image of the homepage? If so please try this code:
@media (max-width: 960px){.fill {background-image: url(http://newworldson.com/new_site/images/slider/NWS2023_Watercolour2h.jpg);}}Make sure to change the image link to yours.
Attached files: Screenshot 2023-10-22 at 20.24.59.png
Best Regards,
Jelly Team
Thank you, does this code:
@media (max-width: 960px){.fill {background-image: url(http://newworldson.com/new_site/images/slider/NWS2023_Watercolour2h.jpg);}}
get placed in index.php or main.css?
Please put the code to main.css. Make sure to clear the cache.
Best Regards,
Jelly Team
Please add these lines to main.css:
@media (max-width: 960px){.intro { height: 420px; min-height: 420px;}} @media (max-width: 960px){.fill {background-image: url(http://newworldson.com/new_site/images/slider/NWS2023_Watercolour2h.jpg);}}Make sure to clear the cache.
Best Regards,
Jelly Team
Hi there, I added the code as suggested and I also edited the images so the desktop version is 1920x1040 like the sample in the template and the mobile version is 960x520 but it the image is still being cut-off in both instances. Can you help?
The site is now live in the site's root directory: http://newworldson.com/
Again sorry, please add !important to this line: see attach.
Attached files: Screenshot 2023-10-27 at 21.28.50.png
Best Regards,
Jelly Team
No need to pay any fees. You also need to add !important after height: 420px: see attach.
Then it should work.
Attached files: Screenshot 2023-10-30 at 01.00.01.png
Best Regards,
Jelly Team
Please replace the second line with:
@media (max-width: 960px){.fill {background-image: url(http://newworldson.com/images/slider/NWS2023_Watercolour960x520a.jpg) !important;}}The image URL should be different, since you removed /new_site.
Best Regards,
Jelly Team
So far so good, thank you!!!
Perfect!
I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.
P.S. I would appreciate if you could please rate the Theme and like the assistance under my support, means a lot to me. Thank you.
You can rate it with your themeforest account at your downloads page, precisely at this link: http://themeforest.net/downloads and hover over the 5 stars for our theme.
Thank you so much for all your help!!!
Best Regards,
Jelly Team
Done, a 5 star review has been posted. Thank you for all of your help!
Thank you very much!
Best Regards,
Jelly Team