I am trying out Cwicly to see if it will work for me. Right now, I am trying to do something that I thought would be simple.
I want to create a tab bar with background color that will span the full-width of the page. However, the tabs themselves should stay aligned with the width of the page content.
Any suggestions on how to make this?
When I make a div full-width, it then becomes almost impossible to get inner elements to align with the content width (as controlled by my theme).
If I use a section block, then I can make the parent one full or partial widths. However, section blocks nested inside have limited width options.
So far, it seems like there are no good options to nest content-width items inside full-width items. I could copy the max-width rules from my theme’s style sheet and use that as custom code, but I am trying to stop doing stuff like that since it has caused me problems in the past.
First of all, it is not required to nest tabs and its contents.
They are completely independent from each other and you have all freedom to achieve your desired design.
Unfortunately, your post lacks required info.
I can see that you are using a 3rd party theme. Which one do you use?
Is there any live environment available, so I can check things out, like the general structure and how the theme behaves in terms of content width, etc.
I’m confident there is a proper and easy solution without going the hacky or custom code route and I would be happy to guide the right way.
Unfortunately I do not have a live environment that you can log in to. I am using Blocksy Pro theme, though of course the goal is to make the solution theme agnostic.
The structure I tried is as follows:
Section (full-width)
-Div (width 100%, background color)
--Div (max-width 1290px)
---Tab list (flex-direction: row; justify-content: flex-end)
----Tab, etc.
Section (normal-width, flex-direction: column)
-Tab contents, etc.
I also had to set Section Defaults for width and max-width to both be blank.
This approach gets me super close, however when the screen size gets smaller than 1290px, the setting of max-width: 1290px does not work properly since Blocksy applies some other margins/padding to ensure the content never runs right up against the page. That is done using some calculations based off css variables which I don’t want to reverse-engineer.
Also, I wonder if I am using too many sections and divs to wrap everything. Any thoughts?
It’s kind of hard to tell what’s the issue, when I can’t have a look at the live site. A login wouldn’t even be required, just a quick look via browser dev tools.
I’ve seen that Blocksy adds another container in-between that interferes with the Cwicly content.
But, I’m not aware of how things work with this theme (in particular with the pro version) in detail and there might be an easy fix or proper approach, like using a custom template, etc.
Yeah, there is plenty of room for optimization, but currently it seems there is some workaround approach involved.
As soon as things got sorted, I can give you some advice in that regard, wouldn’t make much sense now.
I’m pretty sure that there are more people using Blocksy in combination with Cwicly so I’d assume that the team made some experiences here yet so they might be able to give you some hints.
I recommend you to contact their support, since I haven’t seen any people on this forum coming up with Blocksy related stuff - so not sure if you would receive any further feedback on this.
