Viewing Dynamic Width

Dynamic Width



User: Roddy 6 years ago
A number of EverWeb users have successfully used widgets to create responsive page layouts.

The method requires using the centred layout with the width set to 320px. The widgets then need to have the Full Width control to set them at 100% width and then have a centered container with a max-width.

It also inserts a number of unnecessary items and needs the viewport meta tag changed.

It would be a lot easier if the Dynamic Width layout could be used with a few modifications.

Dynamic Width Page Layout

Completely blank template with no adjustment except browser background color.

Insert ...
<meta name="viewport" content="width=device-width, initial-scale=1">

Remove the following divs and their styles ...
Shadow, Container, Header, Content and Footer

Enclose inserted items in a relatively positioned div with either no min-width (preferable) or adjustable min-width...

<div style="width:100%;min-width:320px;position:relative"></div>

Inserting items with relative position will allow the content to be made up from several widgets rather than just one and also allow for banners and slideshows to be inserted with 100vh to fill the browser/device height on page load.

Here's a DEMO with all of the above.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.