BlueOwlCreative » Topic: Responsive problem

Responsive problem

Phil — Tue, 08 Dec 2015 17:54:15 +0000

Hi we have some layout responsive problem on one thing, when we shrink the page some letter in the colon just disapear and not goes down can you help me with that

See the screenshot:

With the responsive layout problem

And what is in full screen:

And here is the link of this page:

http://fel.demo.trifectamedias.com/en/about-us/

Can you help me with this situation?

Thanks

Reply To: Responsive problem

BlueOwl — Tue, 08 Dec 2015 21:12:13 +0000

Hi there Phil,

Sure I would love to help.
May you please double check your attachments, I see dead links there…

Reply To: Responsive problem

Phil — Tue, 08 Dec 2015 21:38:06 +0000

This reply has been marked as private.

Reply To: Responsive problem

BlueOwl — Tue, 08 Dec 2015 22:48:28 +0000

Thanks, I get it now.
Did you try to play around with those 1/12 columns’ Responsive behaviors (Responsive Options tab)?
I would try forcing them to go full width for that specific problematic screen size, as your columns are too small. Play around with those tablet size options to make them 100% or 12 cols.

Reply To: Responsive problem

Phil — Wed, 09 Dec 2015 01:12:31 +0000

This reply has been marked as private.

Reply To: Responsive problem

BlueOwl — Wed, 09 Dec 2015 12:16:53 +0000

Ok, let’s try fixing it with custom CSS, we can add a class to those 1/6 columns (in the example below – “custom_resize_column”) and then force that class to go 1/2 row width for example for the problematic resolution so that they can fit. We will also make sure they wrap correctly, after every 2 items.

@media only screen and (min-width: 769px) and (max-width: 1280px) {
.custom_resize_column {
width: 48%!important;
}
.custom_resize_column:nth-child(2n+1) {
clear: left;
}
}

Let me know if that does it for you.

Reply To: Responsive problem

Phil — Wed, 09 Dec 2015 16:42:15 +0000

This reply has been marked as private.

Reply To: Responsive problem

BlueOwl — Wed, 09 Dec 2015 17:14:32 +0000

HI again,

And have you added the actual classes to the columns? I don’t see them in the code?

Reply To: Responsive problem

Phil — Wed, 09 Dec 2015 17:38:39 +0000

OUpss de classe dont apply the first time sorry, but now it’s work

but not in 768 ( it’s still very very small and in 1366 we still lost last letter in the name ( MARIELLE and the 2 PATRICIA )

Reply To: Responsive problem

BlueOwl — Wed, 09 Dec 2015 18:14:15 +0000

Then try:

@media only screen and (min-width: 768px) and (max-width: 1280px) {
.custom_resize_column {
width: 48%!important;
}
.custom_resize_column:nth-child(2n+1) {
clear: left;
}
}
.team_block h4 {
font-size: 16px;
}