Page 1 of 1
Change text column number in RWD
Posted: Mon Apr 22, 2024 11:13 pm
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?
Re: Change column number in RWD
Posted: Tue Apr 23, 2024 1:20 am
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.
Re: Change text column number in RWD - SOLVED
Posted: Tue Apr 23, 2024 8:51 am
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>
Re: Change column number in RWD
Posted: Tue Apr 23, 2024 8:55 am
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
Re: Change column number in RWD
Posted: Tue Apr 23, 2024 3:46 pm
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.
Re: Change text column number in RWD
Posted: Wed Apr 24, 2024 10:38 am
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
Re: Change text column number in RWD
Posted: Wed Apr 24, 2024 11:49 am
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.
Re: Change text column number in RWD
Posted: Wed Apr 24, 2024 5:01 pm
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
Re: Change text column number in RWD
Posted: Wed Apr 24, 2024 5:07 pm
by crispy68
So is it working now?
Re: Change text column number in RWD
Posted: Wed Apr 24, 2024 6:07 pm
by Sper
crispy68 wrote: Wed Apr 24, 2024 5:07 pm
So is it working now?
Yes