[SmarticleParticipant]

Hi,

I am trying to get the bottom of this grid to sit perfectly along the bottom of the row. As you can see I have added the border line to match the style of the grid itself and I think it looks really nice. The issue though is keeping it aligned to the bottom of the row or column once the screen size changes. The grid itself doesn’t have a class option and I can’t seem to find the right class to assign it in the customiser.

How can this be done? Another potential issue is the grid not filling the column and leaving a white space when it hovers. How could this also be solved?

Thanks

https://snag.gy/GXh1v6.jpg

[SmarticleParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

Please give us the URL of the page.

Thanks.

[SmarticleParticipant]

Sorry, my bad.

http://sarahgraceldn.wpengine.com/homepage/

[SmarticleParticipant]

Also how could I align this coupon button to the right and have it lined up with the buttons?

https://snag.gy/YLzphs.jpg

http://sarahgraceldn.wpengine.com/cart/

Thanks

[ThaiModerator]

Hi There,

Please add the following CSS:

.home .x-section .x-container.marginless-columns .x-column {
    vertical-align: bottom !important;
}
.woocommerce .cart .actions .coupon {
    text-align: right;
}

Hope it helps 🙂

[SmarticleParticipant]

Thanks for that! 🙂

Could I also get some advice on my first question please.

Cheers

[Nabeel AModerator]

Hi there,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

#x-section-6 .esg-container-fullscreen-forcer {
    margin-top: -22px !important;
}

Let us know how this goes!

[SmarticleParticipant]

The code provided didn’t work but I managed to solve it by adding the following code to the columns style.

vertical-align: bottom !important;

Could I also get some more help with the coupon field on the basket page.

This is all the code I have currently controlling the coupon field. The first few lines I wrote myself so it could well be wrong or unnecessary in the long run (the width for example) but basically I need the coupon field to line up with the two buttons on the right and if possible remain responsive.

.woocommerce .cart .actions .coupon input[type="text"] {
  width: 30%;
  display: inline;
  text-align: left;
}

.woocommerce .cart .actions .coupon {
    text-align: right;
}

https://snag.gy/ceUG9A.jpg

Thanks!

[DarshanaModerator]

Hi there,

Please add the following CSS rule also to align it with your two buttons.

.woocommerce #coupon_code {
    max-width: 280px;
}

Hope that helps.

[SmarticleParticipant]

I’m afraid that’s still off slightly.

Can you check it for me please.

Thanks again.

[Paul RModerator]

Hi,

Upon checking, it looks like your site is corrupted.

http://screencast.com/t/l6MQkjy1

I am also getting redirected to sarahgracelondon trying to access wordpress dashboard.

http://screencast.com/t/LKa10nf9WPJ

Kindly check and let us know.

Thanks

[SmarticleParticipant]

Unfortunately, you replied whilst the site was going live.

It seems to be working in edge at the moment but not chrome.

[LelyModerator]

Hi There,

Please adjust the code to this:

.woocommerce #coupon_code {
    max-width: 270px;
}

See attached screenshot of the result:

[Author]

Posts