How To Keep Div's Square? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

How To Keep Div's Square?

H

H

SP Page Builder 3 years ago

I am developing a website with Helix and SP Page builder: www.ijscomanvenlo.nl

On the front page i am using 2 rows of feature boxes (Tile: Waar komen wij"). If I go to Ipad-mode, the widht's of the addon's shrink, but the height stays the same. While I want to maintain the aspect ratio. How can I do that?

Two rows further down I am using an image carrousel addon. Same question: I want to maintain teh aspect ration of the logos when the widht of the screen gets smaller.

Thnx in advance.

Hubert

0
6 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #90785

Hi

Thanks for contacting us, Give me a screenshot of your issue please.

-Regards.

0
H
H
Accepted Answer
3 years ago #90790

Hereby screenshots in iPad mode: https://prnt.sc/RkNzmi1lhQy6 https://prnt.sc/FJqcB1UC6dZE

The images (feature boxes) in the first screenshot should be square, like they are in desktop mode The logos in the second screenshot (image caroussel) are square in desktop mode; on the iPad they are not squere anymore.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #91080

Which browser are you using? It seems all the same in my end.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #91093

Hoi,

About "image carrousel addon" my solution for iPad and Mobile devices, custom CSS

@media (max-width: 1024px) { 
.sppb-carousel-extended-item img, 
.sppb-carousel-extended-item {height: auto;}
}
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #91094

About 1st question, the problem is not a SPPB, but method that you used to set design for those boxes.

But it can be fixed by setting a max-width of addon for tablet and mobile view.

Think about addons like "fat" person in a chair / airplane seat.

You need define specific width of the chair to fit it on different views.

If you ask me why this is so, it is the result of the fact that in other views the addon takes full width.

0
Pavel
Pavel
Accepted Answer
3 years ago #91095

Hi

If I go to Ipad-mode, the widht's of the addon's shrink, but the height stays the same. While I want to maintain the aspect ratio. How can I do that?

It does not depend on the iPad-Mode. Start changing the width of the browser window and you will see that this happens with any width that is less than the original. And it works as it should. The bootstrap columns have a percentage width from the total width of the container.

Since you use fluid width section, you will need to build the entire layout of this block using your own CSS code, which will be quite complicated if you are not a specialist. There are no settings for this

0