Sections Advice

Hi John,

I would use GP's grid system and add something like:

<div class="grid-50 tablet-grid-50 mobile-grid-100 left-no-padding">
Left side image
</div>
<div class="grid-50 tablet-grid-50 mobile-grid-100 right-extra-padding">
Right side content
</div>

Then add this CSS:

.left-no-padding {
    padding: 0px;
}
.right-extra-padding {
    padding: 150px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps.

I'm still having problems with a space on the left and a space on the bottom

i have my sections padding set to 0

Can you show me what you have so far?

A bit hard for me to tell without seeing the site live...

Maybe check your Content Padding in Customizer > Layout > Container?

ooh good idea

I'm leaving the office now but if you can provide a link I'll have a look when I get back :)

ok i changed the inner from contained to full width but it seems to have joined with my next section

https://www.greatestreviews.co.uk/best-badminton-racket/

is the link

This is kind of tricky.

Can you re-add your content padding, and delete the .left-no-padding and .right-no-padding CSS?

Then let me know - I should be able to find a solution :)

ok i made it "contained" instead of "full width"

removed the left and right css and set the section padding back to default

Ok, next you'll want to replace the grid HTML with a plugin like this: https://wordpress.org/plugins/lightweight-grid-columns/

That will set both columns to the same height, which will help us achieve the look you're after.

Once that's done, give the image column the class of: image-column

And the content column the class of: content-column

Then, give your section a top and bottom padding of 0.

Once you get there let me know and I should be able to get you the rest of the way pretty easily :)

OK Done all that!

the bit that uses this text i have changed to "full width" instead of "contained"

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.

Did you add the image-column class and content-column class in the columns as Tom suggested above? I don't see it.

Here is how to add classes: https://en-ca.wordpress.org/plugins/lightweight-grid-columns/faq/

Once that's done we are close!