How can I align a custom content section on my website?

[Alliance]

Hi guys,

I would like to align the custom content section as illustrated bellows :

Thank you,

allianceautoproducts.com

[GemPages]

Hello @Alliance

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Alliance]

Mobile view as well

[oscprofessional]

@Alliance

#shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 .page-width {
    display: flex;
    flex-direction: column-reverse;
}

.section-header.text-center {
    margin-top: 5%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Alliance]

You forgot the margin buttom; the section button margin

[oscprofessional]

@Alliance
Hello,

.page-width .custom-content {
	margin-bottom: 0;
	margin-left: 0;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

[Alliance]

In mobile view it is a mess

[Alliance]

Didn’t work out.

[oscprofessional]

@Alliance

[Alliance]

[Alliance]

Any clue guys

[EBOOST]

Hi @Alliance

You can add code below

@media(max-width: 749px){
  #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content {
    display: flex;
    flex-flow: column;
  }
  #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content .custom__item {
    order: 2;
  }
   #shopify-section-f6304716-080c-4f6d-9b04-2a3a98904d66 > .page-width .custom-content .custom__item--image {
     order: 1;
     max-width: none;
   }
}