Post Images Not Keeping Aspect Ratio While Scaling to Smaller Devices (Responsiveness Issue)

shane53
125 Posts
shane53 posted this 06 April 2021
Ask a Question

Hi Nicepage.

In my sites I use posts quote frequently but have noticed a strange responsive issue when using images within posts. If you preview the post within the Wordpress editor, the image scales down fine and keeps its aspect ratio as expected. However when you preview the page outside the editor (using the theme) it skews (stretches) the image and looks ridiculous. The only solution is to the make the image small enough so its horizontal size will fit within the width of the (mobile) device. The pages made within Nicepage scale images as expected. It makes me think there might be some issue with how Nicepage generates the post theme with respect to responsiveness. I've included some screenshots.

Thanks for your time and keep up the good work!

Screen-Shot-2021-04-06-at-11.22.39-AM.png
Screen-Shot-2021-04-06-at-11.23.06-AM.png
Hi Nicepage. In my sites I use posts quote frequently but have noticed a strange responsive issue when using images within posts. If you preview the post within the Wordpress editor, the image scales down fine and keeps its aspect ratio as expected. However when you preview the page outside the editor (using the theme) it skews (stretches) the image and looks ridiculous. The only solution is to the make the image small enough so its horizontal size will fit within the width of the (mobile) device. The pages made within Nicepage scale images as expected. It makes me think there might be some issue with how Nicepage generates the post theme with respect to responsiveness. I've included some screenshots. Thanks for your time and keep up the good work! !Screen-Shot-2021-04-06-at-11.22.39-AM.png! !Screen-Shot-2021-04-06-at-11.23.06-AM.png!
nicepage wordpress images responsiveness posts
Screen-Shot-2021-04-06-at-11.22.39-AM.png
Screen-Shot-2021-04-06-at-11.23.06-AM.png
Vote to pay developers attention to this features or issue.
4 Replies
Order By: Standard | Newest
shane53
125 Posts
shane53 posted this 06 April 2021

I think I figured it out. For a short period of time the google font I was using wasn't loading and during this time it seemed to be working. From this I wondered if the logo/ text was somehow too big and causing it to glitch. I reduced the size of this element in the theme and it started to behave properly. Weird.

I think I figured it out. For a short period of time the google font I was using wasn't loading and during this time it seemed to be working. From this I wondered if the logo/ text was somehow too big and causing it to glitch. I reduced the size of this element in the theme and it started to behave properly. Weird.
Support Team
Support Team posted this 07 April 2021

Hello Shane,
Thank you for using NicePage!

I'm glad the issue was resolved. Maybe you can try using a grid and add the picture to it in order to improve the responsiveness on mobile devices.

add-grid.png

Feel free to contact us for any further assistance.
...................................................
Sincerely,
Lilioneta
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello Shane, Thank you for using NicePage! I'm glad the issue was resolved. Maybe you can try using a grid and add the picture to it in order to improve the responsiveness on mobile devices. !add-grid.png! Feel free to contact us for any further assistance. ................................................... Sincerely, Lilioneta Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
add-grid.png
shane53
125 Posts
shane53 posted this 07 April 2021

That's a good tip. I'll try that. I didn't do it before because at school they said not to use tables for formatting, only displaying data. They want us to float elements instead but I've always had to fight when using a float.

However if it gets the job done then why not try.

That's a good tip. I'll try that. I didn't do it before because at school they said not to use tables for formatting, only displaying data. They want us to float elements instead but I've always had to fight when using a float. However if it gets the job done then why not try.
Support Team
Support Team posted this 08 April 2021

Hi Shane,

Grid is not a table, it is more dynamic and we always suggest to use grids instead of tables. Please feel free to try and let us know if you need further help.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Shane, Grid is not a table, it is more dynamic and we always suggest to use grids instead of tables. Please feel free to try and let us know if you need further help. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design