Support Forums

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

Your Time: Our Time:

Ratio on DesktopPC, Mobile, Tablet screen

Featured Lock Resolved Issue
Dear Support,
Please suggest how to config the screen on Desktop PC, Mobile, and Tablet as these picture attached:

Ratio on Desktop PC screen is OK.
Ratio on Mobile portrait screen is OK.
Ratio on Tablet landscape screen is OK.

Ratio on Mobile landscape screen is not OK.
Ratio on Tablet portrait screen is not OK.

Thank you for your help

Attachments (5)

  • Desktop PC.jpg
    Desktop PC.jpg 336.3 KB
  • Mobile-portrait.PNG
    Mobile-portrait.PNG 814.6 KB
  • Mobile-landscape.PNG
    Mobile-landscape.PNG 732.9 KB
  • Tablet-landscape.JPG
    Tablet-landscape.JPG 112.6 KB
  • Tablet-portrait.JPG
    Tablet-portrait.JPG 121.7 KB

5 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your queries.
1) Mobile landscape issue : you need to refresh the page to get the menu in right place.
2) Tablet portrait : Please use this css into your custom css to solve the issue

@media only screen and (max-width: 768px) and (min-width: 700px) {
#sppb-addon-1541776622642 .sppb-addon-single-image-container .sppb-img-responsive {
width: 100vw;
}
}


-Best Regards

mongkol

More than a month ago #Permalink
Dear sifat

I tried your code and it still not OK,
I thought it may confused with the former code that toufiq gave me.

@media only screen and (max-width: 1000px){
.sppb-slideshow-fullwidth-item {
max-height: 380px;
position: relative;
min-height: 380px;
}
}

The above code can solve layout on mobile portrait (2.1MobilePortrait.jpg) and presently it is OK.

Now please look at the overall pictures I attached
For PC desktop & Notebook
1.1PCdesktop-24inch.jpg - It is OK.
1.2PCnotebook-15inch.jpg - It is not OK, I would like it to look similar to 1.1PCdesktop-24inch.jpg

For Mobile
2.1MobilePortrait.jpg - It is OK.
2.2MobileLandscape.jpg - To refresh the page still can't solve completely, I would like it to look similar to 1.1PCdesktop-24inch.jpg

For Tablet
3.Tablet Portrait & Landscape.jpg - it is not OK, I would like it to look similar to 1.1PCdesktop-24inch.jpg

Thank you for your help in advance.
Best regards,

Attachments (5)

  • 1.1PCdesktop-24inch.JPG
    1.1PCdesktop-24inch.JPG 204.8 KB
  • 1.2PCnotebook-15inch.JPG
    1.2PCnotebook-15inch.JPG 178.7 KB
  • 2.1MobilePortrait.jpg
    2.1MobilePortrait.jpg 195.7 KB
  • 2.2MobileLandscape.jpg
    2.2MobileLandscape.jpg 165.9 KB
  • 3.Tablet Portrait&Landscape.jpg
    3.Tablet Portrait&Landscape.jpg 202.3 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Please remove all your custom css and check if there exists any issue there.
Cause there should be some confliction in css.

Note: custom support is beyond our support range.


-Best Regards

mongkol

More than a month ago #Permalink
Hi,
Thanks for your reply. Please remove all your custom css and check if there exists any issue there.
Cause there should be some confliction in css.

Note: custom support is beyond our support range.


-Best Regards


Hi,
The custom.css file setup is now OK for desktop screen(24 inch) and mobile portrait screen, but it is not responsive for the other screen I mentioned. The thing is I just want them to responsive correctly to the other screen.

Thanks and please help

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. You can have all the responsive options in pagebuilder. The site will automatically be responsive. You can't get the same look for all the devices. Because the viewport isn't same for all the devices.
Here i find your site is looking good in all devices https://files.fm/u/gxpsj37b
If you require any further implementation. Then you can use your custom code to do so.
Please check out the following links
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

-Best Regards


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: 146
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 86
Toufiq

Toufiq

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289407

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