Change text column number in RWD

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
Sper
 
 
Posts: 16
Joined: Sat Nov 24, 2018 11:21 pm
Location: Zagreb
Contact:
Contact Sper

Change text column number in RWD

Post by Sper »

In the html code, the CSS looks like this:

Code: Select all

.style_2_col {
   background-color: transparent;
   column-count: 2;
   text-decoration: none;
}
@media only screen and (max-width: 1199px) {
.style_2_col {
   background-color: transparent;
   column-count: 2;
   text-decoration: none;
}
And I would like it to look like this:

Code: Select all

.style_2_col {
   background-color: transparent;
   column-count: 2;
   text-decoration: none;
}
@media only screen and (max-width: 1199px) {
.style_2_col {
   background-color: transparent;
   column-count: 1;
   text-decoration: none;
}
And when I change it manually, I get that I have one column on my mobile phone, and two on my desktop.
I wasn't able to set it up in the program. A change in any breakpoint changes the column setting for all breakpoints.

OK, the same can be achieved with duplicate containers that are only visible for a specific breakpoint. But I see no reason why it wouldn't work?
Last edited by Sper on Wed Apr 24, 2024 10:47 am, edited 1 time in total.
Top
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Change column number in RWD

Post by crispy68 »

If you want to have different # of columns in breakpoints, you need to make sure that you set the Overflow to "hidden" in the grid properties. This will allow you to add/hide columns and not affect other breakpoints.
Top
User avatar
Sper
 
 
Posts: 16
Joined: Sat Nov 24, 2018 11:21 pm
Location: Zagreb
Contact:
Contact Sper

Re: Change text column number in RWD - SOLVED

Post by Sper »

@crispy68, I tried it and it doesn't work. Although I have 2 columns set for desktop, and 1 column for mobile, the result is always two text columns (WWB16.4.5) But I found a way to force CSS via style in Page HTML / between <head> </head> tag:

Code: Select all

<style>
.style_2_col {
   background-color: transparent;
   column-count: 2 !important;
   text-decoration: none;
}
@media only screen and (max-width: 1199px) {
.style_2_col {
   background-color: transparent;
   column-count: 1 !important;
   text-decoration: none;
}
</style>
Top
User avatar
Pablo
 
Posts: 22472
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

Re: Change column number in RWD

Post by Pablo »

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134
Top
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Change column number in RWD

Post by crispy68 »

Please create a simple demo of the page and provide the .wbs file for us to download and look at. I know it is possible and something must be set up incorrectly. Only seeing what you've done will get you the solution you need.
Top
User avatar
Sper
 
 
Posts: 16
Joined: Sat Nov 24, 2018 11:21 pm
Location: Zagreb
Contact:
Contact Sper

Re: Change text column number in RWD

Post by Sper »

crispy68 wrote: ↑Tue Apr 23, 2024 3:46 pm Please create a simple demo of the page and provide the .wbs file for us to download and look at. I know it is possible and something must be set up incorrectly. Only seeing what you've done will get you the solution you need.
I reproduced the problem in WWB19. You can download the project from the link:

https://mega.nz/file/OMBx2YzY#yMFkCGCcJ ... 1O1RVnXtq4
Top
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Change text column number in RWD

Post by crispy68 »

Ok, so I misunderstood your initial question and thought it had something to do with the layout grid but you are actually referring to a text object where you are using 2 column text option and changing to 1 column in the breakpoint. This is a completely different thing.

Please open the properties of the text object and check the box to "Enable Responsive Fonts". This should work now.
Top
User avatar
Sper
 
 
Posts: 16
Joined: Sat Nov 24, 2018 11:21 pm
Location: Zagreb
Contact:
Contact Sper

Re: Change text column number in RWD

Post by Sper »

crispy68 wrote: ↑Wed Apr 24, 2024 11:49 am Ok, so I misunderstood your initial question and thought it had something to do with the layout grid but you are actually referring to a text object where you are using 2 column text option and changing to 1 column in the breakpoint. This is a completely different thing.

Please open the properties of the text object and check the box to "Enable Responsive Fonts". This should work now.
In the text properties there should be:
Overflow: none
Include responsive fonts: checkmark
Column count: 1..N (for each breakpoint)

Thanks for your help
Top
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Change text column number in RWD

Post by crispy68 »

So is it working now?
Top
User avatar
Sper
 
 
Posts: 16
Joined: Sat Nov 24, 2018 11:21 pm
Location: Zagreb
Contact:
Contact Sper

Re: Change text column number in RWD

Post by Sper »

crispy68 wrote: ↑Wed Apr 24, 2024 5:07 pm So is it working now?
Yes
Top
Post Reply

Return to “Responsive Web Design”