Sections Advice

Once the class is added, you can do this:

.image-column .inside-grid-column {
    height: 100%;
    padding: 0;
}

.image-column img {
    height: 100%;
    width: 100%;
}

This will most likely cause stretching of the image if the area is too big. Making your section contained might help, or you might just need to reduce the width of the image column.

i forgot to add those classes but i have done so now and added the css tom mentioned. it doesn't seem to have given me the result i was expecting though

Hmm, I'm not seeing the classes. Can you make sure they're added?

[ lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false" class="image-column"]<img src="https://www.greatestreviews.co.uk/wp-content/uploads/2017/01/badminton-1019110_1920-e1485965446826.jpg" />[/lgc_column][lgc_column grid="50" tablet_grid="50" mobile_grid="100" class="content-column" last="true"] The badminton racket is very personal and important piece of equipment for every serious badminton player. There is a very personal connection between a player and his racket, it is basically an extension of their bodies. It takes some time and a lot of experience for most, if not every badminton player to develop that personal connection with a particular brand of racket. There are factors that must be considered by players in choosing the racket that suits a particular style of play (Defensive or aggressive), and delivers the kind of performance that is required.[ /lgc_column ]'

<span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 50px; left: 20px;">Save</span>

<span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save</span>

<span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c  no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save</span>

they are there. I can't post the code into here as it disappears

I don't know why i'm getting spans with save at the bottom all the time though

For some reason my browser really caches your website, not sure why it takes so long to clear even after manually clearing it.

My mistake on the CSS, try this instead:

.inside-grid-column.image-column {
    height: 100%;
    padding: 0;
    margin: 0;
}

.inside-grid-column.content-column {
    padding: 40px;
}

Not sure what's going on with those span tags with the Save text, but you'll definitely want to remove them. Maybe another one of your plugins are adding those?

after a bit of googling turns out it was the pinterest button plug in for firefox causing the random span code

looks like i'm almost there but there's still a gap on the left and a tiny gap at the bottom which i don't understand

Alright, this should be the final working code:

.inside-grid-column.image-column {
    height: 100%;
    padding: 0;
    margin: 0;
}

.image-column img {
    height: 100%;
}

.inside-grid-column.content-column {
    padding: 40px;
}

.inside-grid-column.image-column {
    height: 100%;
    padding: 0;
    margin: 0;
}

Then, give the section a custom class of: no-padding

That will remove the padding to the left and right: https://docs.generatepress.com/article/sections-overview/#layout

it sorta worked but not what i was imagining

thanks for all your help

i also have another problem now lol

on the wilson positive and negatives i've tried to make them together but i want the positive half to be all green and the negative half to be all red

any idea how i can accomplish this?

i tried removing the background color for the section then used the grid and added a class to each grid "pro" and "con"

Looks like you are almost there :)

Try adding height: 100%; to both con and pro classes in your CSS.

Hello
I followed your instructions and it is very cool but I found a problem in some tablets. Attached image of the part that is mismatched when changing the screen size. Do you know of a solution?
https://drive.google.com/open?id=1FEgAVu_k5lfmMVgEteEEudJa3ncbF18i
I did several tests and what makes it work wrong is adding a class inside "Lightweight Grid Columns". Please help.
Thank you!

Hi there,

Any chance you can start a new topic and link us to your site?

Thanks!