Responsive design is not fully responsive

9 Posts

Jacob Rees-Mogg posted this 20 November 2018

After a few days watching the videos I started with my first real design. You can see it here:

http://niceplay.codeigniter.org.uk

It is nowhere near finished, of course.

Note that when you reduce the viewport, the size of the elements on the page reduces, and the menu changes to a hamburger, as expected, but the spacing between the elements increases, which is not expected. This is code produced by Nicepage - I have not tweaked it all. I watched the responsive part of the intro video and everything seemed to be OK, so I'm obviously doing something wrong, but what ??

If you look at the main site: www.codeigniter.org.uk, this is a responsive site using Bootstrap 4 which I made myself and the media queries work as expected. ( Not all the site is completed yet )

So - let me in on the secret of how to do responsive wed designs with Nicepage !

Keith Taylor

After a few days watching the videos I started with my first real design. You can see it here: http://niceplay.codeigniter.org.uk It is nowhere near finished, of course. Note that when you reduce the viewport, the size of the elements on the page reduces, and the menu changes to a hamburger, as expected, but the spacing between the elements increases, which is not expected. This is code produced by Nicepage - I have not tweaked it all. I watched the responsive part of the intro video and everything seemed to be OK, so I'm obviously doing something wrong, but what ?? If you look at the main site: www.codeigniter.org.uk, this is a responsive site using Bootstrap 4 which I made myself and the media queries work as expected. ( Not all the site is completed yet ) So - let me in on the secret of how to do responsive wed designs with Nicepage ! Keith Taylor

Last edited 20 November 2018 by Jacob Rees-Mogg

responsive

Vote to pay developers attention to this features or issue.

4 Replies

Order By: Standard | Newest

Support Team posted this 22 November 2018

Hi Keith,

According to our records, you have only one unanswered topic - this one.

but the spacing between the elements increases, which is not expected.

The spacing is the same. You previously specified a fixed height for the section. This height remains the same in all modes until you reduce it manually. Therefore in order to remove this space simply set different section height in each responsive mode.

Please feel free to contact us using this account if you have any further questions or issues with Nicepage.

...................................................
Sincerely,
Olivia
Nicepage Support Team

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

Hi Keith, According to our records, you have only one unanswered topic - this one. > but the spacing between the elements increases, which is not expected. The spacing is the same. You previously specified a fixed height for the section. This height remains the same in all modes until you reduce it manually. Therefore in order to remove this space simply set different section height in each responsive mode. Please feel free to contact us using this account if you have any further questions or issues with Nicepage. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

9 Posts

Jacob Rees-Mogg posted this 22 November 2018

Hm - that seems the wrong way to go about it, if you don't mind me saying.

For e.g an image, the usual way to do this is to quote the width as a % of whatever container you are using. As the viewport width changes, the browser then changes the height, to keep the aspect ratio constant. That you way you always see all the image, albeit a smaller version. Doing it the way you suggest does not do this, since changing the section height crops the picture

Look at eg www.tesco.co.uk or www.rbs.co.uk. The main image grows smaller but maintains its' aspect ratio, so does not
look cropped.

Also here ( https://keithtaylor.me.uk/ ) is a Wordpress theme I tweaked myself which does exactly what a respionsive site should do, don't you think ?

How do you this with NicePage ?

rgds
KT

Hm - that seems the wrong way to go about it, if you don't mind me saying. For e.g an image, the usual way to do this is to quote the width as a % of whatever container you are using. As the viewport width changes, the browser then changes the height, to keep the aspect ratio constant. That you way you always see all the image, albeit a smaller version. Doing it the way you suggest does not do this, since changing the section height crops the picture Look at eg www.tesco.co.uk or www.rbs.co.uk. The main image grows smaller but maintains its' aspect ratio, so does not look cropped. Also here ( https://keithtaylor.me.uk/ ) is a Wordpress theme I tweaked myself which does exactly what a respionsive site should do, don't you think ? How do you this with NicePage ? rgds KT

Last edited 22 November 2018 by Jacob Rees-Mogg

Support Team posted this 27 November 2018

KEITH,

For e.g an image, the usual way to do this is to quote the width as a % of whatever container you are using. As the viewport width changes, the browser then changes the height, to keep the aspect ratio constant.

It works for Images but you're using image as background image. This is style property. In this case the image size depends on the size of the control (Section). The Section height is static until you change it in the different mode. Therefore you should either resize the Section or remove Section bg and use Picture control resized to the sheet width:

In any case, you will need to adjust the Section height because this is a fixed value and it will be inherited from desktop other responsive modes.

...................................................
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

KEITH, > For e.g an image, the usual way to do this is to quote the width as a % of whatever container you are using. As the viewport width changes, the browser then changes the height, to keep the aspect ratio constant. It works for Images but you're using image as background image. This is style property. In this case the image size depends on the size of the control (Section). The Section height is static until you change it in the different mode. Therefore you should either resize the Section or remove Section bg and use Picture control resized to the sheet width: !resize-picture-control.png! In any case, you will need to adjust the Section height because this is a fixed value and it will be inherited from desktop other responsive modes. ................................................... 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

resize-picture-control.png

9 Posts

Jacob Rees-Mogg posted this 27 November 2018

Olivia

Ah - yes, that makes sense. I did not appreciate that the image was a background image. And I did not realise there was a picture control.

I'll play with that and let you know how I get on

Thanks for your helpful answer. It takes a little getting used to - having a program make all the adjustments rather than doing the CSS yourself !

Olivia Ah - yes, that makes sense. I did not appreciate that the image was a background image. And I did not realise there was a picture control. I'll play with that and let you know how I get on Thanks for your helpful answer. It takes a little getting used to - having a program make all the adjustments rather than doing the CSS yourself ! KT

You must log in or register to leave comments

Responsive design is not fully responsive

Company

Product

Themes & Templates

Nicepage

Web Design