How do I Change Height Of A Section In A Custom Layout? - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

How do I Change Height Of A Section In A Custom Layout?

O

Ola

Template 8 months ago

Hi!

I am creating a custom layout in the Helix Template.

On Row 1 (at the top) I got two columns with the module positions Top 1 and Top 2.

On Top 1 I want to include a module with an image. Original height is 200 px but the section shrinks it to about 40-60 px.

I wonder how do I change the height of a section that I added to the layout in the Helix Template?

I can only see the options to change number of columns. Under Row Option I can add "Fluid row", "Padding, "Margin" etc. But nowhere "Section Height"?

How can I do that?

Thanks. Ola

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183533

Hi

Thanks for contacting us. You will get all of these options under Section Height Options in the Styling tab of the section settings interface. Click the drop-down icon and the new height options will appear.

You can follow this blog below:

https://www.joomshaper.com/blog/sp-page-builder-gets-new-section-height-options-addon-features-more-in-v3-3-6-pro#:~:text=You%20will%20get%20all%20of,new%20height%20options%20will%20appear.

This feature is available on SPPB pages section.

-Regards.

0
O
Ola
Accepted Answer
8 months ago #183534

Thanks for you answer.

This applies to section of pages as I understand. I have created a header in the custom layout that I want to change the height of.

I did create a new row - on top of the menu called "Top Images". I want to know how to change this height.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183538

Hi

Do you want to change this height?

0
O
Ola
Accepted Answer
8 months ago #183539

Yes. The section with the image + the text.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183546

Hi

Do you want to give a height on that? Then you may use a background color also then you can see that well. You can use this CSS in your custom.css file

section#sp-section-1 {
    height: 150px !important;
    background-color: red;
}
0
O
Ola
Accepted Answer
8 months ago #183599

Thank you for your answer. I appriceate it. I help my wife with the site.

This is in Custom.css now.

You added this? Not sure what section it applies to. .sp-page-builder .page-content #section-id-a0cc0e50-727b-4269-b90f-e9f829e6cd9a{ display: flex !important; justify-content: center !important; align-items: center; margin-left: 200px !important; }

I added this section#sp-section-1 { height: 250px !important; }

I can see that the section is now 250 px height. But the image is still small. It's original size is 250 px but not re-sized to 250 x

The image is in the module Toppbild - Oval

I have cleaned the cache.

Is there something else I should do?

Kind regards Ola

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183662

Hi

I have suggested that code

section#sp-section-1 {
    height: 150px !important;
    background-color: red;
}

isn't it helped?

0
O
Ola
Accepted Answer
8 months ago #183669

The height is changed when I use your code.

But the image is still to small. The height of the image is only about 60-90 px in the view but original size is 250 px. I want the image to be at same height as width of the row (150 or 250 px)

Kind regards Ola

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183671

Hi

You have used some custom CSS which conflicts and does not help you to set the width of the image, please check.

I think you should keep a full site backup and recreate this whole portion.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 months ago #198939

HI

Is this issue resolved now? If so, please close this post by accepting the answer.

0