Responsive Design, best practice

7 Posts

mattamonro posted this 13 October 2023

I can't get Nicepage to provide a consistent responsive result, without additional changes. As you can see in the images, for some reason Nicepage has adjusted the height of the Grid to 200px and the Block to 205px (there also seems to be an additional 5px added to the Grid)

Please advise what is normal way to do this, or is there a better way that guarantees responsive design quickly ?

Many thanks
Matt

Hi Nicepage, I was wondering what the best procedure is to add to a page: 2 buttons, side by side. My Options are: a) 2 Button elements in a Block = each Button Element must be manually adjusted for each responsive view b) 2 Buttons elements in a Grid (as per attached images) = Block and Grid and Button must all be adjusted I can't get Nicepage to provide a consistent responsive result, without additional changes. As you can see in the images, for some reason Nicepage has adjusted the height of the Grid to 200px and the Block to 205px (there also seems to be an additional 5px added to the Grid) Please advise what is normal way to do this, or is there a better way that guarantees responsive design quickly ? Many thanks Matt!1.JPG!!2.JPG!

responsive

1.JPG

2.JPG

Vote to pay developers attention to this features or issue.

5 Replies

Order By: Standard | Newest

Support Team posted this 16 October 2023

Hello,

Did you try the "Reset Responsive" option as suggested? Apply Reset Responsive, adjust the height in the Desktop mode, and check responsive modes.

Could you please provide a problem Block?

...................................................
Sincerely,
Olivia
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, Did you try the "Reset Responsive" option as suggested? Apply Reset Responsive, adjust the height in the Desktop mode, and check responsive modes. Could you please provide a problem Block? !export-block-2.png! ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

export-block-2.png

7 Posts

mattamonro posted this 14 October 2023

Hi Nicepage,
Thank you for your reply.
You say "The height should be the same." after testing I can confirm that not always correct:
1. If "Grid" is "Column Repeats Elements" (= "List), then NP is perfect & Height adjusts correctly between responsive views.
2. If "Grid" is "Columns are Different", then heights in the various responsive views are incorrect.

In my uploads you will see that height was set at 65px in Desktop (Responsive Reset done)
In Tablet view height becomes 100px
In Mobile view height becomes 200px

This is very annoying when designing Info boxes etc

Hi Nicepage, Thank you for your reply. You say "The height should be the same." after testing I can confirm that not always correct: 1. If "Grid" is "Column Repeats Elements" (= "**List**), **then NP is perfect** & Height adjusts correctly between responsive views. 2. If "Grid" is "**Columns are Different", then heights in the various responsive views are incorrect.** In my uploads you will see that height was set at 65px in Desktop (Responsive Reset done) In Tablet view height becomes 100px In Mobile view height becomes 200px This is very annoying when designing Info boxes etc

Support Team posted this 13 October 2023

Hi Matthew,

Alan means the height. You can change the height in the way you need in each responsive. As an alternative, we recommend that you try to "Reset Responsive" under the Block right-side panel (in Desktop mode), then set the desired height in the Desktop mode and check other modes. The height should be used the same. If you're not using cell padding, please use the Align option to align the buttons inside the Grid cells.

Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
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 Matthew, Alan means the height. You can change the height in the way you need in each responsive. As an alternative, we recommend that you try to "Reset Responsive" under the Block right-side panel (in Desktop mode), then set the desired height in the Desktop mode and check other modes. The height should be used the same. If you're not using cell padding, please use the Align option to align the buttons inside the Grid cells. Please let us know if you have any further questions. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

7 Posts

mattamonro posted this 13 October 2023

Hi Nicepage,
"Set the width" of what ? Will that stop NP from changing the grid height somehow,
As you can see the width is 100% (Boxed), but NP changed the height from 65px to 200px why ?
Please explain ?
Many thanks,
Matt

Hi Nicepage, "Set the width" of what ? Will that stop NP from changing the grid height somehow, As you can see the width is 100% (Boxed), but NP changed the height from 65px to 200px why ? Please explain ? Many thanks, Matt

Support Team posted this 13 October 2023

Matthew,

You can set the width in the desktop view, and it will automatically be the same in other views.
...................................................
Sincerely,
Alan R.
Nicepage Support Team

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

Matthew, You can set the width in the desktop view, and it will automatically be the same in other views. ................................................... Sincerely, Alan R. 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

Responsive Design, best practice

Company

Product

Themes & Templates

Nicepage

Web Design