I've prepared pillar content, with couple of ways of navigation (redirecting users to specific place of the pillar content, like for example chapters or top of the pillar).
Pillar is based on two columns:
1) left contain content;
2) right - one of the way of navigation, made by sticky sidebar, following with users and giving them possibility to go to the top in every moment.
Unfortunately pillar is not responsive, because I have changed margins. It was necessary due to making it more readable and user friendly.
I hope I described it clear enough but just in case I sent some pictures.
So is there any option to make a page responsive again without changing margins to previous version? Take a look for attachments, I hope it would be useful. If any furher information will be needed don't be ashamed 🙂
So basicly you can "call" every group/object/module in the template individually(it can get messy very quick) by typing .pillarpage(replace it with the name you've added as abody-class) in front of it. (Don't do it somewhere "in the middle" of the CSS file!!!) - best-case always at the bottom(or in a seperate CSS file)
If you decide to go with a seperate CSS file it could be the better solution because:
- all changes you do will affect only the templates you assign the seperate CSS to
- you don't mess up your "Theme"
For the HTML part:
- do you have somewhere
{{standard_header_includes}}
in the
<head>
...
</head>
part?
If yes - you will propably will need to override the global loaded CSS(s) by adding your "public url"(I've talked about it in the previous post) to the css after it.
you should never(!!!) 🙂 do paddings/margins in the page-build mode(except emails). The best way(imo) is to do it with classes and mobile-queries.
Add a class like "pillarpage"(or something else) to the group(or whatever you want to behave different on tablet/mobile), go to your main CSS file(or your pillarpage CSS if you have one) and add the desired mobile-queries(with the class) to it.
it should look something like this:
in the design-managerin your CSS file
here's a link of "all" media-queries. You can find many informations about them on the web. just search for them 🙂
hope this helps
regards,
Anton
Did my post help answer your query? Help the Community by marking it as a solution
Thanks for your advice. It's very useful, but I have one more question - how can I change it in CSS file? I changed CSS class, but after that I didn't find this specific template in coded files. Is it possible that coded "version" of this template not exist, because for example it was import and I'm not allowed to do it?
you must have a CSS file somewhere. Otherwise it wouldn't be styled at all 😉
Do you mean by "coded" like "HTML"-coded or more like "design manager"-drag&drop coded?
How does your template look?
Something like this:
design manager
or something like this
"html"-code
If it looks like the design manager screen: if no element is selected you can see all important template informations on the right sidebar. the first one should be called "liked stylesheet"(or similar) - click on the file which is displayed below it. Thats your CSS file.
In some cases it could be inserted inside the "additional <html>-markup" field. Most likely as (same applies to the "HTML"-coded version)
thanks for your help! 🙂 If I change the width in html code it will be impemented to all landings created by this template? I'm asking because I've created a clone version (in design manager) of this template and changed named
and ofcourse CSS-class in right sidebar
But after moving to html stylesheet I'm redirecting to stylesheet that we use to create different landing pages and that made me thinking if i change the code all created landing would be changed also or maybe I have to clone cms-stylesheet?
So basicly you can "call" every group/object/module in the template individually(it can get messy very quick) by typing .pillarpage(replace it with the name you've added as abody-class) in front of it. (Don't do it somewhere "in the middle" of the CSS file!!!) - best-case always at the bottom(or in a seperate CSS file)
If you decide to go with a seperate CSS file it could be the better solution because:
- all changes you do will affect only the templates you assign the seperate CSS to
- you don't mess up your "Theme"
For the HTML part:
- do you have somewhere
{{standard_header_includes}}
in the
<head>
...
</head>
part?
If yes - you will propably will need to override the global loaded CSS(s) by adding your "public url"(I've talked about it in the previous post) to the css after it.