Mobile/Tablet Compatibility

weightliftingwithoutlimits · Member · Jan 6, 2018 at 8:35 am
Copy link

Add topic to favorites
How do I make sure my displayed images scale to the screens of mobile and tablet? When I preview in tablet/mobile mode, the images are cut off?

Thanks.

The blog I need help with is: (visible only to logged in users)
avydun · Staff · Jan 6, 2018 at 8:41 am
Copy link
What theme is your WordPress.com site https://weightliftingwithoutlimits.com/ using? I can have a look at it and suggest further.
weightliftingwithoutlimits · Member · Jan 6, 2018 at 9:26 am
Copy link
radcliff 2
weightliftingwithoutlimits · Member · Jan 6, 2018 at 2:38 pm
Copy link
Any ideas?
weightliftingwithoutlimits · Member · Jan 6, 2018 at 3:40 pm
Copy link
Does anyone know the CSS code to make sure my displyed images (and other images) scale in mobile devices?
weightliftingwithoutlimits · Member · Jan 7, 2018 at 7:54 am
Copy link
?
thesacredpath · Member · Jan 7, 2018 at 7:46 pm
Copy link
Hi there, can you point us to a page where the image is not resizing? I’ve checked your site and am not seeing any. I did check the Radcliffe 2 demo site and the image do seem to be resizing just fine.

Also, when you respond to your own thread, to try and bump it, it ends up putting you at the bottom of my list of threads that need response since my list is from oldest to newest, and when you respond to bump, it puts you at the bottom (newer date/time)
weightliftingwithoutlimits · Member · Jan 9, 2018 at 6:43 am
Copy link
It would be the display image on the home page

On the mobile version I only see the center part of it.

https://weightliftingwithoutlimits.com/

thanks.
michroniche · Member · Jan 9, 2018 at 4:34 pm
Copy link
Hi,

I can not access to your website because it is on private mode.

Please make it public so we can see it.
avydun · Staff · Jan 9, 2018 at 5:38 pm
Copy link
michroniche, please don’t ask the original poster to make their site public. Volunteers ought to respect their privacy.

If you are unsure about an answer during volunteering, leave the thread and let others to take it up. You can also subscribe to the thread if you wish to stay updated on the progress.

Also, note that if a Happiness Engineer is already engaging in the thread, it’s not necessary for the volunteers to jump in. It’s encouraged you read this volunteers guide too to know how we work.

Thank you for contributing!
weightliftingwithoutlimits · Member · Jan 10, 2018 at 11:45 am
Copy link
sorry, the website was temporarily private for updating. It is now public.

Yes, it seems that the display images wont scale down on phones/tablets.
thesacredpath · Member · Jan 11, 2018 at 6:50 pm
Copy link
Hi @weightliftingwithoutlimits, this is tricky since the theme software continually calculates the height of that div based on the width of the viewport, and it isn’t designed to keep the entire image visible at all screen sizes, but to have the image cover the entire area allotted to it. This is about the best I can do. First off, remove these two CSS rules from your custom CSS.
```
.page .entry-thumbnail {
 max-height:600px
}
.page .entry-thumbnail {
 max-width:100%
}
```
Then add this one and see what you think.
```
.page .entry-thumbnail {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  height: calc(100vw * 0.40) !important;
  min-height: 100% !important;
}
```
weightliftingwithoutlimits · Member · Jan 17, 2018 at 1:55 pm
Copy link
I will try it and see if it works!

I will get back to you

Steve,
thesacredpath · Member · Jan 19, 2018 at 7:31 pm
Copy link
Steve, I’m going to mark this as resolved, but if you need additional help on this issue, feel free to post back here in this thread and we will be happy to help.

No items found.