[Solved] Style accoding to breakpoints : an advice?

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
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

[Solved] Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Hello,

I am trying to create style according to breakpoint sizes.
For example :
In 320 px viewport : corps-texte (sorry for fr. ) >> a special set of properties like : fonts sizes, color and whatever, and I call it corps-text320, etc..
In 480 pw viewport : corps-text 480, etc...

It's worth the job since my site is a text-site mostly but I am not sure how not to overdoing. I have as brkpoints 320 480 768 800 1024 1600

So I started, it went ok for 320 px (nice procedure in fact, beautiful result) but when I moved at 480, it had all set up texts, titles, etc... in 320 ?
It seems to me I have two methods there.
. one breakpoint = one (set of) style
. or more simple :
Like 320 480 = style 1 (and its corps-text, titles, sub-title called "small")
Like 768 822 =s stye 2 (and its corps-text, titles, sub-title called "middle")
like 1024 1600 =style 3(and its corps-text, titles, sub-title called "big")
Any advice?
Thank you so much.
Last edited by UncleEti1 on Wed Mar 18, 2020 10:13 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

The style should have the same breakpoints as the page.
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

I am having hard time with this.

I open defaut page (1600px).
I have created a style which I call parag1600.I have my corresponding icon which appears in the style tool bar.
I enter a text . I select it.Then during the time it is selected, I click on the icon parag1600. Ok, my text-object takes the attributes of the style.

Then I open the style manager and enter different breakpoints ( 320, 768, 1024) for parag1600 style.
I do Ok, close the style manager.
On my page, I click on 768 in breakpoints tools.

Then I don't get it :

My text is still the same size ( parag1600 styled). So I open the style manager because I want to select 768px in the list of breakpoints I have entered previously, but now, there is not anymore a list of breakpoints. And if I come back to 1600 viewport, and I do "style manager", idem, the list of styles is now empty.
I am thick, sorry, but I don't manage to go overthat.
Can you explain me how to use this "style" feature a bit?
Thank you.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

Can you please share a demo project so I can see what you have done?
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Please, find it here.



https://www.khenpo.fr/page1.html

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

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

Can you please remove all non-relevant content from the project?
There are so many styles that I have no ides where to start looking :(

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Pablo wrote: Wed Mar 18, 2020 8:24 am Can you please remove all non-relevant content from the project?
There are so many styles that I have no ides where to start looking :(
Yes I suspected that.
Sorry.

Ok, click again on the link above to get a light version of the zip file and sorry again;
Thank you.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

I still see multiple pages an lots of styles.
Did you remove all non-relevant content?
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Sorry, computer mistakes...

Please click again on the above link.

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

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

The link no longer works now...
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

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

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

Your project still has 18 custom styles and none of them is responsive.
The style should have the same breakpoint as the page. Not extra styles with different names, but the breakpoints should be added to the style itself.

I think, it may be helpful if you read this related tutorial:
http://wysiwygwebbuilder.com/responsive_text.html
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Sorry, I have been bothered a lot doing this site by all kinds of problems (not Wb problems).For example, when I started my computer today, the big table with iconic representations of styles was not anymore available in the tool-ribbon and I thought I had suppressed many useless styles ! And other little problems the detail of which doesn't concern WebBuilder but got me tired, and with a decreased awareness.

Now I got it ! :) :)


Just sharing with beginners or uneducatable peoples like me), who wants to create a responsive style.
It's a cool feature beginners should learn from the beginning.After, you just have to select your viewports and the text will change accordingly. You'll a save tremendous amount of time in particular if you're are into texts like real huma beings do, and,as says the tutorial, you get a clean nice result.

- Insert text (say text-object, sounds more pro). Select the so created text (not the frame, the text itself which will show a transparent layer, see?). When you hoover with the mouse above it, a little window appears with different attributs for text. This window is transparent but when you hoover on it, it turns solid.
- Select Styles among thoses attributes. A windows appears. There you select "create one". In fact, at this stage of your advance studies, more safe than using a ready-made one, because if you have already pages the content of which you forgot and in particular with a ready-made style you don't remember, you might change tenths of page layouts without seeing what you're doing.
Select a style name obeying the same rules as selecting a file name (no space, no capital letter, no accent, etc..). I forgot that and my page did not publish OK (tks Pablo).
Ok, now the trick which costed me a bucket of sweat,bucket of tears.
You have this style-window open. With "defaut" appearing into the menu-window right high corner. Don't MOVE it. Just create the Defaut style you want. Then do' nt press Ok. Just click on the tiny arrow near the menu-window, you will be asked to add another breakpoint value (or manage your BrckPt values). Do that and change again the values (try a color-font to be sure it does something) having in mind the viewport you want to use (no 24 fonts for a 320px viewports, pretty straightforward). Keep doing that as much as you need (Pablo recommands somewhere defaut+2 values, but it depends your situation of course). But wait being finished for pushing OK.


That's it. Thanks

Thanks Pablo for your patience.
Last edited by UncleEti1 on Fri Mar 20, 2020 8:24 am, edited 3 times in total.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Style accoding to breakpoints : an advice?

Post by Pablo »

The graphic-card's memory should not have any effect on the use of styles in your project.
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Style accoding to breakpoints : an advice?

Post by UncleEti1 »

Ok thanks
Post Reply