Hi all
I have this site i am working on using the breakout grid-template-columns named lines from Kevin's example vid.
On this page: https://dembetheatre.org/hire I would like the image on the right to be 50% of the width of the viewport but I just can't seem to get it.
I have tried making the whole container full-width and indenting the left column by the clamp for content padding to the left but the gap and the size of the right image are never right... Any ideas? getting a little frustrated with what should be a simple 50/50...
Hire the venue
Hire the Theatre
If you would like to hire The DEMBE Theatre for your performance, production or event, then please do get in touch and we will be happy to help.
5 Replies
Hi there. Taking a look at this. I've scaled down your site a little bit and it looks like your clamp is looking correct but its definitely not 50/50 like you're hoping and that seems to be because of the padding on the left which makes that side appear lopsided.
Interestingly, that is not the case and you do actually have a 50/50 layout that you're hoping for and the gutter is throwing it off visually as defined in this screenshot (notice the widths on the highlighted sections are exactly the same widths).
A possible solution for this could be that you apply the width value that you're using to create the left/right gutters and add that to the width of the image which should impose the extra width that makes it visually appear that the image and content are completely 50/50
.
You can see an example of this if you turn off the grid in the
content-grid class which removes the gutters- it adds back that additional width to the image hereby achieving what you're hoping for.
For clarity, i've removed your clamp in the fifty class to make it obvious that the 2 sections are 50/50.
thanks for the reply.
Am resetting and will report back,
I apprecaite the input