Page 1 of 1
Limiting Card Container Width
Posted: Tue Oct 19, 2021 9:02 pm
by Magical
I am trying to limit the Card Container to a width of 970. I tried using -970 (which works for the layout grid) but it does not work for Card Container. Is there a way to restrict the Card Container to a certain Width? Same issue with the Flex Container.
Re: Limiting Card Container Width
Posted: Tue Oct 19, 2021 10:14 pm
by crispy68
It works for me. In the card container, simply type 970 in the maximum width field. Same is true for a flex container.
Re: Limiting Card Container Width
Posted: Wed Oct 20, 2021 3:10 pm
by Magical
If you add an image to the card container background style then it is visible that the container takes the enter width of the browser.
Re: Limiting Card Container Width
Posted: Wed Oct 20, 2021 3:23 pm
by crispy68
You did not mention anything about adding an image to the background of a flex container or card container in your original post. This make sense as the container is full width. I'm not sure if it's currently possible. It may be something Pablo can add similar to the layout grid.
Re: Limiting Card Container Width
Posted: Wed Oct 20, 2021 8:55 pm
by Magical
I was trying to customize the sunset template. I can fix the header width using -970 but that is a layout grid. Tried the same on the card container and it did not work.
Re: Limiting Card Container Width
Posted: Wed Oct 20, 2021 9:02 pm
by crispy68
I guess i'm confused on what you are trying to do exactly. Are you trying to limit the width of the content placed inside the container (based on your first post) or limit the width of the background image (2nd post)?
Re: Limiting Card Container Width
Posted: Thu Oct 21, 2021 3:25 am
by Magical
Limit the background of the Card Container so it stays aligned to the header and the rest of the content at 970 width.
Re: Limiting Card Container Width
Posted: Thu Oct 21, 2021 3:48 am
by crispy68
Try adding the following CSS code between the <head> tags:
Code: Select all
<style>
#wb_FlexContainer1{max-width:970px;margin-right:auto;margin-left:auto;}
</style>
Change the word "FlexContainer1" to whatever the ID is of your flex container. This works the same for a Card Container.