Docs

[scottkwilson]

Hi – I would like to have all of the columns within the ‘Services’ section be the same height when viewed on different devices. I tried the CSS below but it does not work. What am I doing wrong?

http://qualitycbs.stormwindcreative.com/

@media (min-width:980px) {
div#x-section-2 .x-column.x-sm.x-1-4 {
min-height:645px;
}
}

@media (min-width:979px) {
div#x-section-2 .x-column.x-sm.x-1-4 {
min-height:750px;
}
}

[Jade]

Hi there,

Please try this code:

@media (min-width:767px) {
    div#x-section-2 .x-column.x-sm.x-1-4 x-text {
       min-height:345px;
    }
}

@media (min-width:980px) {
    div#x-section-2 .x-column.x-sm.x-1-4 x-text {
       min-height:645px;
    }

Hope this helps.

[scottkwilson]

Didn’t work unfortunately. Any other suggestions?

[Joao]

Hi Scott,

Please try the following code instead:

@media (min-width:767px) {
    div#x-section-2 .x-column.x-sm.x-1-4  {
       min-height:345px;
    }
}

@media (min-width:980px) {
    div#x-section-2 .x-column.x-sm.x-1-4 
    }
}

Let us know how it goes.

Thanks

Joao

[scottkwilson]

Hi Joao. Still no success.

[Christopher]

hi there,

Please try this code:

@media (min-width: 767px) and (max-width:874px){
div#x-section-2 .x-column.x-sm.x-1-4 .x-raw-content {
    height: 966px;
}
}
@media (min-width: 874px) and (max-width:1122px){
div#x-section-2 .x-column.x-sm.x-1-4 .x-raw-content {
    height: 769px ;
}
}
@media (min-width:1122px){
div#x-section-2 .x-column.x-sm.x-1-4 .x-raw-content {
    height: 614px;
}
}

Hope it helps.

[scottkwilson]

Thanks! This worked! 🙂

[Joao]

Glad to hear it.

Joao

[scottkwilson]

Hey I’m back. The client wanted to remove one of the columns so I updated the code to what’s shown below.. but now I’m getting a strange effect on other pages. On these pages (http://qualitycbs.stormwindcreative.com/services/ and http://qualitycbs.stormwindcreative.com/faqs/) there is waaaay too much space at the bottom of the box that says “Questions” in the heading — the last box in the right column. How can I get this snug so it’s the same space as the top of the box? Thanks!

@media (min-width: 767px) and (max-width:874px){
div#x-section-2 .x-column.x-sm.x-1-3 .x-raw-content {
height: 666px;
}
}
@media (min-width: 874px) and (max-width:1122px){
div#x-section-2 .x-column.x-sm.x-1-3 .x-raw-content {
height: 550px ;
}
}
@media (min-width:1122px){
div#x-section-2 .x-column.x-sm.x-1-3 .x-raw-content {
height: 525px;
}
}

[Joao]

Hi There,

Would you mind providing more details if possible a screenshot of what you are trying to achieve?

Also if possible please provide your web admin credentials in a private reply so we can take a closer look.

Thanks

Joao

[Author]

Posts