iPad and iPhone

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
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

iPad and iPhone

Post by alex4orly »

What should be the break points
For Landscape
For Portrait

Is there a way to detect it with Javascript?

Thanks
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

Looks like - finding out screen width and screen height
If width is larger - we are in landscape

Or maybe, there is a better option?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: iPad and iPhone

Post by Pablo »

Please see "Which breakpoints should I add to my web page?"
viewtopic.php?f=10&t=63817
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

Yes, I read the tutorial, but now it was a refresher.
A few questions:

1) Set image output format to SVG, where?
2) Shift+CTRL+R doesn't show me what objects are responsive
3) I followed the tutorial for Shape objects on the home screen : https://squadron-125.org.il/home2.php (set all of the blue shapes to Output CSS3) but on reducing the browser width - thy all go into one column...
4) I have this page : https://squadron-125.org.il/fig2.html

On it, I have 2 Layout grids, one for full view, the other for breakpoint at 480px
Each layout grid is divided into 6 columns, in each column I have 3 layout grids - the top for the name,the middle for the picture, the bottom for the button.

But, if you reduce the browser width to invoke the break point, it places all the items underneath each other.
There is room for 3 items in the top level and another 3 in the next line, it would be much nicer instead of all the empty space.

It does the same in the original page where I have only one Layout grid object:
https://squadron-125.org.il/thefigures.html
I made a copy of the original for the fig2.html page thinking I could do it...

I cant figure out how to achive this

Any suggestions?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: iPad and iPhone

Post by Pablo »

Why are you using two layout grids?
You can also do it with one.

If you want a different number of columns in breakpoints then you can use the 'overflow' functionality
http://wysiwygwebbuilder.com/layoutgrid_advanced.html
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

Not clear, I have here two Layout grids . https://squadron-125.org.il/home2.php
The page is set to 970px wide
In each grid I have 4 blue shapes
In default width - the grid is set to 970px max width
I want all the 4 columns to remain in the 768px, 480px break point - just to be small
What grid type should I set it to?

When I change the max width in one breakpoint, it sets this new value for all the views... so How do I cange the width for each break point alone?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: iPad and iPhone

Post by Pablo »

Step 1
Use one layout grid

Step 2
Use 'overflow'
Related tutorial:
http://wysiwygwebbuilder.com/layoutgrid_advanced.html
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

But,

If I only use one layout grid - all the 8 options / menue will be on one line for desktop windows, the rest of the sreen will be empty...
I read the tutorial, but obviously I don't see how to do it

Good morning from Australia

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: iPad and iPhone

Post by Pablo »

Did you checkout the demo?
http://www.wysiwygwebbuilder.com/suppor ... anced.html

Is that what you are looking for?

Or else check out the example templates this may help you fin the right settings for your layout:
http://wysiwygwebbuilder.com/templates9.html
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: iPad and iPhone

Post by crispy68 »

Hey Alex4orly,

I'm a bit confused on what exactly you are trying to do. One of your links is to a page with 8 blue rectangles (2 rows of 4), another is 6 images of heads that turn into 8 pics (2 of cats) and another of 6 heads in a row then switch to a column.

Are you asking how to have the objects/pics/blue rectangles break into other rows as the screen gets smaller and fills the space better? I'm not following what the exact question is here. :?
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

The front page with the 8 blue shapes is the same problem as the page with the faces.
Pablo, I checked the demo, but that doesn't tell me how it is done

As to the template, the link brings me to a page of templataes, which one should I look at.

I like the idea to NOT have to create new grids for each break point, but not clear

Please point me to the template itself if you can

Thaks again
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

Crispy68 :
This is exactly what I am asking : "Are you asking how to have the objects/pics/blue rectangles break into other rows as the screen gets smaller and fills the space better?"

At the moment, the 8 shapes are the entry menu to the site, the same problem I have with the pictures

As I get to reduce the browser width - mobile phones, tablets...
The 8 shapes become one long vertical column, instead of being reduced in size to fit - horizontaly, lets say
3 on the same row
3
2

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

Re: iPad and iPhone

Post by crispy68 »

Hey Alex,

I made a demo: top uses nested layout grids and bottom uses 1 layout grid with custom overflow.

https://wizbangwebdesign.com/demo/grid/

Is this what you are looking for? If so, I can send you the demo to study.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: iPad and iPhone

Post by alex4orly »

Both look good, not clear on the terminology you are using
Can I have this project, hopefully looking at the setup I will learn how to implement either of the options

Never tried either of them, but sounds like a useful option to have

I have in the meantime played with it here, have a look at the front page with your phone : https://squadron-125.org.il/home2.php

Still nees fine tuning.

I tried to reduce the text size for the 480px break point so that it fits inside the shape, but it doesn't allow me to change, any ide why?

Anyway, how can I have this project sample?

Thank you so much
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: iPad and iPhone

Post by crispy68 »

reach out to me at ron@wizbangwebdesign.com
Post Reply