Flex grid not responsive

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
pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 1:46 am

I'm still having an issue. It appears to be related to the master_frame. Mine is not responding the same way yours is.

When I preview the page, the slide show initially is on top of the footer. then it moves into place after about 10 seconds. Then when I shrink the page down, the image seems to go behind the footer.

I uploaded the new file with the master_frames page.

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

Re: Flex grid not responsive

Post by Pablo » Thu Dec 06, 2018 7:41 am

You will have to understand that flex box is CSS, the slideshow uses JavaScript for the animations, so this may cause a conflict when used like this.
- the flex box properties forces the slideshow container to stay inside the grid area (via flex grow/shrink)
- the slideshow script animates the images while trying to keep the aspect ratio.

The flex grid area is not necessarily the same size/aspect ratio as the image. So, the slideshow will never exactly fill the grid area.
The only way this would work is if the images were scaled 100% horizontally and vertically 100% of the box, but then the aspect ratio of the image would be lost.

If you really want this then you can add this code between the head tags of the page HTML:

Code: Select all

<style>
#SlideShow1 .image
{
   width: 100% !important;
   height: 100% !important;
}
#SlideShow1 li
{
  height: 100% !important;
}

#SlideShow1
{
  height: 100% !important;
}
</style>

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 4:59 pm

Pablo,

Thanks, But there still seems to be an issue. Let me see if I can demonstrate it it. Some how it seems to be with the way master_frame is working...

This is what is happening in my program file even though I have copied Crispy's settings, the image drops into the footing (and loads slowly)
https://www.pacificcoasttriumph.com/WYS ... review.jpg

Then when I shrink my file down
https://www.pacificcoasttriumph.com/WYS ... Shrink.jpg

Crispy's file with no master_frame applied (shrinks correctly)
https://www.pacificcoasttriumph.com/WYS ... Shrink.jpg

Crispy's File with my master_frame applied. It looks correct, and there is no image overlay over the footer. Also it loads MUCH quicker.
https://www.pacificcoasttriumph.com/WYS ... iewwMF.jpg

Crispy's File with my master_file applied when I shrink it down, The layout is correct, BUT>>> Notice the background disappears!
https://www.pacificcoasttriumph.com/WYS ... inkwMF.jpg


Any ideas? I added Crispy's .wbs file so you can look at it.

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

Re: Flex grid not responsive

Post by Pablo » Thu Dec 06, 2018 6:06 pm

The size of the slideshow is controlled by the grid and flex grow/shrink.
CSS (flexbox) and JavaScript (Slideshow) both try to size the images in a different way, so the results will be random depending on which one is executed first by the browser.

I do not think this it the correct way to implement the layout like this.

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 6:10 pm

PABLO!!!!!

Then why do Crispy's files work???? Are you NOT READING MY COMMENTS?????????????

I have been reading your comments, very carefully as a matter of fact.

COME ON!!!!!!!!!!! IF YOURE JUST TRYING TO BLOW ME OFF THEN JUST SAY SO

Are Crispy and I running the same version??? There is a glitch somewhere OR I have some setting wrong.

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

Re: Flex grid not responsive

Post by Pablo » Thu Dec 06, 2018 6:14 pm

PABLO!!!!!
Then why do Crispy's files work???? Arew you NOT READING MY COMMETNS?????????????
COME ON!!!!!!!!!!! IF YOURE JUST TRYING TO BLOW ME OFF THEN JUST SAY SO
I'm sorry, but I really had the best intentions to help you, but it looks like you do not appreciate my help.
But I do not think I deserve to be shouted at!

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 6:17 pm

You're not giving any help!!!!!!!!! And I told you I am getting frustrated with this 1 page. I have been working on it for 3 DAYS!!!

For example you say "I do not think this it the correct way to implement the layout like this." Then how about a suggestion on how YOU would do a layout like this.

Like I said, you aren't offering help, your just telling me what your program CAN't do. Why does Crispy's file work, and mine doesn't. And if you have a better suggestion, then what is it?

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

Re: Flex grid not responsive

Post by Pablo » Thu Dec 06, 2018 6:44 pm

The reason why it works in Cripsy's project is because he has added breakpoint to implement the desired behavior.

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 10:33 pm

Pablo,

Thank you. That is what I was missing. I'm very new to this program and I'm still trying to learn what the tools and other terms mean and do.
I also did not know the Flexgrid's columns and rows needed to then be adjusted for each specific Breakpoint also. Now that opens up more options for design.

So the only issue I see remaining is:

Crispy's file opens instantly and the slide show is in the correct place
https://www.pacificcoasttriumph.com/WYS ... iewwMF.jpg

My page is taking about 20 seconds to load, and during that 20 seconds the slide show is over the page footer. Then it moves to the correct page, and the animations in the footer happen.
https://www.pacificcoasttriumph.com/WYS ... review.jpg

I don't think my Test.wbs file I uploaded for you is showing you that, but that is what is happening on my local file. It appears to me that both pages are the same, so I must have something set wrong.

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Thu Dec 06, 2018 11:48 pm

Pablo,

Is this just happening because of the file size when making the preview???

User avatar
crispy68
 
 
Posts: 427
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex grid not responsive

Post by crispy68 » Fri Dec 07, 2018 12:51 am

my personal opinion is it's taking a split second for the javascript to kick in and load the images for the first time. When I re-preview the site, I dont see that delay any further due to the images being cached already.

User avatar
BaconFries
 
 
Posts: 4203
Joined: Thu Aug 16, 2007 7:32 pm

Re: Flex grid not responsive

Post by BaconFries » Fri Dec 07, 2018 1:20 am

My page is taking about 20 seconds to load, and during that 20 seconds the slide show is over the page footer. Then it moves to the correct page, and the animations in the footer happen
Please note that what your are seeing has nothing to do with the program, just as crispy the delay is caused by the browser loading the js and the images and once cached it will load faster. I would recommend that you optimize all your image(s) weight wise in kb's (kilobytes) not in mb (Megabytes) if used and that they are .jpg not .bmp or .png so to ensure they load faster.

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

Re: Flex grid not responsive

Post by Pablo » Fri Dec 07, 2018 7:29 am

my personal opinion is it's taking a split second for the javascript to kick in and load the images for the first time. When I re-preview the site, I dont see that delay any further due to the images being cached already.
I agree with Crispy and Baconfries. The JavaScript takes some time to load the images. The larger the images, the more time it will take to load (and execute the script).

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Fri Dec 07, 2018 4:27 pm

Ron Thanks,
crispy68 wrote:
Fri Dec 07, 2018 12:51 am
my personal opinion is it's taking a split second for the javascript to kick in and load the images for the first time.
My local complete file is taking about 20 seconds to move the slide show to the proper place, and start showing the images. Your file and my test file both fire almost instantly. The only difference I can see is that your file just contains a single page, and the master_frame whereas mine contains all of the site I am building.
When I re-preview the site, I dont see that delay any further due to the images being cached already.
We are both using the same image source, (pulled down from a url image file)

Also, when I preview I am not using "preview the whole site" just the single page. Also I have checked the weight of both files, and it shows exactly the same. Which makes me think it must be due to the overall size of the .wbs file when using the preview, even though I am only viewing a single page.

I'm planning to finally publish the site today, so hopefully it will be resolved when I see it "live".

Thanks again.

pacstar
 
 
Posts: 84
Joined: Wed Nov 14, 2018 8:49 pm
Contact:

Re: Flex grid not responsive

Post by pacstar » Fri Dec 07, 2018 4:31 pm

BaconFries wrote:
Fri Dec 07, 2018 1:20 am
Please note that what your are seeing has nothing to do with the program, just as crispy the delay is caused by the browser loading the js and the images and once cached it will load faster. I would recommend that you optimize all your image(s) weight wise in kb's (kilobytes) not in mb (Megabytes) if used and that they are .jpg not .bmp or .png so to ensure they load faster.
Thanks, That's what I'm hoping. And all of the images are .jpg's

I'm hoping to get teh site published today, once I see it live, then it will help to see what I need to tinker with (and learn more about) easier.

Thanks again.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests