banner / header layers problem using breakpoints

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
rogerl
 
 
Posts: 199
Joined: Tue May 03, 2016 8:24 am

banner / header layers problem using breakpoints

Post by rogerl » Thu Dec 07, 2017 10:21 pm

Currently working my way through issues with viewing my web site on mobiles and using bps. I kept noticing that the layer I use as banners on my site fall short of covering the full width of the screens particularly when changing from landscape to portrait. I have not come across any setting to resolve this issue. While researching I came across this earlier topic on the Forum:
https://www.wysiwygwebbuilder.com/forum ... 59&t=64425
It covers my issue - so with that in mind I inserted the following code into the head of my page html which over-rides the width:100% code that Web Builder generates:

Code: Select all

<style>

@media only screen and (max-width: 768px)
{
#Layer2
{width:768px !important;
}
}
@media only screen and (max-width: 480px)
{
#Layer2
{width:480px !important;
}
}
@media only screen and (max-width: 320px)
{
#Layer2
{width:320px !important;
}
}

</style>
This has solved the problem.
Have I missed a setting somewhere that will resolve the issue before I set out to insert this code on other pages?
My layer settings are:
header / footer mode
relative horizontal sizing
alignment center

Regards
Roger

User avatar
Pablo
 
Posts: 14521
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: banner / header layers problem using breakpoints

Post by Pablo » Fri Dec 08, 2017 7:11 am

'full width' means 100% of the current viewport. The browser will not recalculate the width when you change orientation unless you hard code the width (like you have done in your fix).

Post Reply