[Support request] Sections Advice

[johnzoro]

How can i do an image on the left and some text on the right

Would a table be the easiest? I want a big image with no gaps like this in this image

[Leo]

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.

[johnzoro]

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

[Leo]

Can you show me what you have so far?

[johnzoro]

[Leo]

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

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

[johnzoro]

ooh good idea

[Leo]

I’m leaving the office now but if you can provide a link I’ll have a look when I get back 🙂

[johnzoro]

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

[Tom]

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 🙂

[johnzoro]

ok i made it “contained” instead of “full width”

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

[Tom]

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 🙂

[johnzoro]

OK Done all that!

[johnzoro]

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.

[Leo]

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!

[Author]

Posts