Docs

[knmcmahon]

Hello –

I thought I had set up the following page to be responsive (http://kevinnmcmahon.com/ownyourtime), but it looks like the right hand side gets cut off on phones. I’m not a designer (everything I did, I taught myself), but I thought there was coding to add that would make the page shrink and enlarge depending on the screen size. Any ideas?

Thanks

[knmcmahon]

This reply has been marked as private.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 860px) {
    .page-id-1381 #x-section-2 .x-container, #x-section-2 .x-column {
        width: 100% !important;
    }

    .page-id-1381 #x-section-2 .x-container:first-child .x-column:first-child {
        text-align: center;
    }
}

Hope this helps.

[knmcmahon]

This worked awesome, Jade. Thank you!!

[knmcmahon]

One last question. For some reason it doesn’t seem to be working on this page – http://kevinnmcmahon.com/ownyourtimesignup

[Rue Nel]

Hello Again,

The given code will only apply to that particular page. That is why it is showing in the mentioned page. If you want to also take effect on this new page, please update your code and use this instead:

@media (max-width: 860px) {
    .page-id-1381 #x-section-2 .x-container, #x-section-2 .x-column,
    .page-id-1430 #x-section-2 .x-container, .page-id-1430 #x-section-2 .x-column {
        width: 100% !important;
        height: auto !important;
    }

    .page-id-1381 #x-section-2 .x-container:first-child .x-column:first-child,
    .page-id-1430 #x-section-2 .x-container:first-child .x-column:first-child {
        text-align: center;
    }
}

We would loved to know if this has work for you. Thank you.

[knmcmahon]

Brilliant, Rue. Worked perfectly! Thank you.

[Joao]

Glad to hear it,

Joao

[knmcmahon]

Ok, one last question regarding this. I just added another page (http://kevinnmcmahon.com/signup) and it’s not responsive. I saw that you are putting page IDs in, but how would I change the CSS to include this page as well?

Thank you,
Kevin

[Friech]

Hi Kevin,

Please follow this post on how to locate post/page IDs.

Hope it helps, Cheers!

[knmcmahon]

Hi – thank you for your response. I guess I didn’t ask my question right. I know how to get the page/post IDs, but looking at the code below, I see that page-id-1430 was mentioned twice, while 1381 was only mentioned once. I could replicate this code for any of my pages if I could understand that one part. Thanks.

@media (max-width: 860px) {
.page-id-1381 #x-section-2 .x-container, #x-section-2 .x-column,
.page-id-1430 #x-section-2 .x-container, .page-id-1430 #x-section-2 .x-column {
width: 100% !important;
height: auto !important;
}

.page-id-1381 #x-section-2 .x-container:first-child .x-column:first-child,
.page-id-1430 #x-section-2 .x-container:first-child .x-column:first-child {
text-align: center;
}
}

[Rupok]

Hi there,

It’s mentioned twice because you have set the static width to ROW and Column both so both needed to reset hence it’s twice.

For the page you referred, the code would be like this :

@media (max-width: 860px) {
.page-id-1479 #x-section-1 .x-container, .page-id-1479 #x-section-1 .x-container .x-column {
  width: 100% !important;
}
}

But I am not sure why you are setting a static width like 800px that’s breaking the usual responsiveness. You will need to reset this everywhere and certainly it’s not a good practice at all. You should not use such static width to the ROWs and Columns.

Hope this makes sense.

[knmcmahon]

Yes, thank you for the explanation. I took off the static width and changed the number of columns and it seems to be ok. Let me continue playing with it.

[Joao]

Let us know if you need further help

Joao

[Author]

Posts