Hello, How do I edit certain breakpoints without it changing all the other breakpoints?
Thank you!
1 Like
You can’t edit the content as such on individual breakpoints, but you can set different styling options for each breakpoint. If you simply move from one breakpoint to another and change the styling options, maybe text size or column width, you will notice that Blocs creates a custom class. As you switch to other breakpoints you can make changes to this custom class and the changes you make will only affect the breakpoint you’re working on.
In many respects, it’s better to create and name your own custom classes for things that you know you will need to adjust. By using your own class names you will have a better idea of what each class does and you will be able to apply it to other elements if necessary.
If you want certain content to only appear on certain breakpoints. you can use the visibility option to hide or display elements on specific breakpoints. Although all of the elements will appear on every page in your blocs projects file, only those elements that are designated to display on specific breakpoints will appear on the final pages. To give you an indication of which elements will display, your hidden elements will be dimmed when viewing in the blocs interface.
Thank you for your help!
I have tried to do this but as I am using a bric which has two columns it will not let me move my content directly underneath just by editing the custom classes as it ends up looking like the last screen shot. When i want it took look like the first screenshot on a desktop and then on all other devices to look like the second screenshot if you get what I mean?
Than you in advance!
second screenshot
Third screenshot
It may be best to keep things really simple. Start with a normal single column bloc on your page (full width). Set the width of the column to 3 - like so:
With the column still selected, switch to the next breakpoint and set the column width to 6 - like this:
you can leave the other two mobile breakpoints at full width or smaller if you wish - it’s up to you.
Now go back to the wide breakpoint and with the column selected press Command-D 3 times to duplicate the column across the page. If you now look at the other breakpoints you will see the columns have been arranged as a block of 4 (2 above 2) on the tablet breakpoint and as a single column in the smaller breakpoints. Here is an example of the tablet breakpoint.
All you have to do now is populate the columns with your content.
You don’t have to stick to my arrangement. If, for example you wanted different layouts, simply go to each breakpoint and adjust the column width accordingly.
If you want a situation where you have one larger column sitting above three smaller ones. Simply select the first column and increase its width to 12. The remaining columns will then wrap under the larger top column and can have their widths set to 4.
Thank you so much! It worked !! thank you!
1 Like
Solved a problem for me too! I was going to ask tomorrow…
1 Like
If it is of help to anyone having difficulties with columns, the attached tutorial document may be of use to you. It’s an in-house training tutorial so feel free to download and use as a reference.
gridColumnsTutorial.pdf.zip (3.3 MB)
1 Like