Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Image issues

Featured Lock Resolved
Hi. The image on my homepage does not display properly on mobile devices. The image turns into a blurry brown background when viewing on a phone. The website is:
https://familylink.net.au

Any advice is appreciated.
background on desktop.jpg background on phone.jpg

Attachments (2)

  • background on desktop.jpg
    background on desktop.jpg 49.8 KB
  • background on phone.jpg
    background on phone.jpg 57.1 KB

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Does code


#section-id-1519278764266 img {
max-width: 75px;
max-height: 75px;
}


helped for all devices ?

Or you need to try with


#section-id-1519278764266 img {
max-width: 75px !important;
max-height: 75px !Important;
}

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
first you made webmaster mistake, like beginner.
Image support-group-narrow.jpg - now have 4,6 MB is too big, images used on website like you did in general should have max 1920px of width and not more than 750Kb.
It means that you went to your local store to buy bread and milk - by truck/lorry instead bike.
Step 1: Reduce file resolution and file size, upload and use again.

Step 2: Try this custom CSS


@media (max-width: 580px) {
.sp-page-builder .page-content #section-id-1511613808 {background-attachment: scroll;}
}


In Home page > Options > CSS

Ian

More than a month ago #Permalink
Hi,
first you made webmaster mistake, like beginner.
Image support-group-narrow.jpg - now have 4,6 MB is too big, images used on website like you did in general should have max 1920px of width and not more than 750Kb.
It means that you went to your local store to buy bread and milk - by truck/lorry instead bike.
Step 1: Reduce file resolution and file size, upload and use again.

Step 2: Try this custom CSS


@media (max-width: 580px) {
.sp-page-builder .page-content #section-id-1511613808 {background-attachment: scroll;}
}


In Home page > Options > CSS

Ian

More than a month ago #Permalink
Thank you for your hel[p. Seems to be working now, However, I have another issue. On a desktop, the image lookds finr and loads better noe.it looks fine, and now on mobile looks fine> thank you. Byt now we on a surface pro there is s little part were the small images have turned as big as the text area. Here is the link :
Familylink.nett.au
Attached is a normal one on a desktop and the bad one on a windows. The surfach looks terrible
[attachment]IMG_2444.jpg[/attachment] surface.jpg desktop.jpg

Attachments (2)

  • desktop.jpg
    desktop.jpg 351.2 KB
  • surface.jpg
    surface.jpg 168.6 KB

Ian

More than a month ago #Permalink
Yes. Thank you Paul. Well done. Problem solved. You're awesome!


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 153
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 21
Al Mamun

Al Mamun

Total Accepted Answers: 3
Pavel

Pavel

Total Accepted Answers: 3

113

Templates

289225

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us