[WardJenParticipant]

[WardJenParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thanks for posting in and giving us your site URL.
To uniform the height of the 3 callout box, we can set minimum height. Please add the following CSS code in your Customizer via Appearance > Customize > Custom > CSS:

.page-id-49 .x-callout {
 min-height: 300px;
}

Hope this helps.

[WardJenParticipant]

Brilliant, thank you…. Is it possible to display the buttons at the same line height in each callout?

[ThaiModerator]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

.page-id-49 .x-callout a.x-btn {
  position: absolute;
  bottom: 35px;
  left: 50%;
  margin-left: -58px;
}

Hope it helps.

[WardJenParticipant]

That worked great, many thanks

[ChristianModerator]

You’re welcome. Glad we could help. 🙂

[WardJenParticipant]

One last thing, is it possible to have the callouts display better on tablet (landscape and portrait) pls, they look great on desktop and mobile but not so good on tablet?

Thanks again..

[WardJenParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

@media (max-width:979px){
.home #x-section-3 .x-column.x-sm.x-1-3 {
  width: 100%;
}
}

Hope that helps.

[WardJenParticipant]

Hi again,

Thanks for getting back though it does not seem to work, the 3 boxes still remain portrait when viewed on a tablet.

Do you have any other ideas?

And thanks!

[ThaiModerator]

Hi There,

Please update the previous code a bit:
+ Change:

@media (max-width:979px){
.home #x-section-3 .x-column.x-sm.x-1-3 {
  width: 100%;
}
}

+ To:

@media (max-width:1024px){
.home #x-section-3 .x-column.x-sm.x-1-3 {
  width: 100%;
}
}

Hope it helps.

[WardJenParticipant]

Hi there,

I still can’t get it to work!!

Here is the css for the callouts on the site (on a couple of different pages)

/* Callout */

.page-id-49 .x-callout a.x-btn {
position: absolute;
bottom: 35px;
left: 70%;
margin-left: -58px;
}

.page-id-80 .x-callout {
min-height: 280px;
}

.page-id-80 .x-callout a.x-btn {
position: absolute;
bottom: 35px;
left: 70%;
margin-left: -58px;
}
.page-id-80 .x-callout a.x-btn {
position: absolute;
bottom: 35px;
left: 70%;
margin-left: -58px;
}
.page-id-80 .x-callout {
min-height: 300px;
}

@media (max-width:1024px){
.home #x-section-3 .x-column.x-sm.x-1-3 {
width: 100%;
}
}

.h-callout { /* call out title */
font-size: 26px;
}

.x-callout {
background-color: #f4f4f4;
}

.p-callout { /* call out text */
font-size: 16px;
}

.x-callout .x-btn { /* call out button */
font-size: 12px;
}

.x-callout a.x-btn {
float: right;
}

.page-id-49 .x-callout {
min-height: 310px;
}
.page-id-49 .x-callout a.x-btn {
position: absolute;
bottom: 35px;
left: 70%;
margin-left: -58px;
}

Perhaps there is something conflicting. Right now they look ok on desktop, and mobile – though too much white space here! It is on tablet that the 3 columns become distorted, is there a way even to have them stack on top of each other? Would be amazing to eliminate white space too if possible.

BTW, THANKS for everything, the site is due to go live tomorrow!!

Jenny

[LelyModerator]

Hello Jenny,

Please add the following CSS code for Tablet. If this doesn’t do the trick, please provide a screenshot on your next reply.

 
/* Tablet (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
.home #x-section-3 .x-column.x-sm.x-1-3 {
width: 100%;
}
.page-id-49 .x-callout {
min-height: 0;
}
}

Hope this helps.

[WardJenParticipant]

Hi again,

It doesn’t seem to do the trick yet.. still not collapsing for tablet.. silly question but how do I send a screenshot

Thanks,

Jenny

[Author]

Posts