Docs

[yhshin1020]

Hey,

I am in the effort to make my site mobile responsive.

I have several problems occuring on my site on mobile (or smaller screens in general) now:

1) On my homepage, I have set a height for the promo boxes because i wanted them to be the same height. On smaller screens, the box height seems too small so this occurs: http://imgur.com/a/yeZ9I

2) On http://www.guidedogssg.com/support-us/, the content gets cut off on smaller screens like this: http://imgur.com/a/vQKdo

3) On http://www.guidedogssg.com/programme/guide-dogs/uncrpd/, the word also gets cut off: http://imgur.com/a/kwVpy

4) On http://www.guidedogssg.com/contact/downloadables/ I want to center the text in the columns on mobile view (using margin-left: auto; and margin-right: auto; instead of text-align because i want to keep them left-aligned.) like this: http://imgur.com/a/PvLvr

5) Similarly on http://www.guidedogssg.com/contact/join-us/, I want to horizontally align the text (http://imgur.com/a/MmQUB)

6) Lastly, on my homepage, on mobile, the section looks like this: http://imgur.com/a/ktXzF, how can I make it look like this: http://imgur.com/a/azD2H (basically decrease header size, have more padding around the columns with text and add spacing between them).

Sorry if this is a long request!

Thank you!

[yhshin1020]

This reply has been marked as private.

[Joao]

Hi There,

1-

Change :

.prbox {
     height: 600px; 
}

for

.prbox {
    min-height: 600px; 
}

2,3 –

Yes you can use “Responsive Text” in Cornerstone – http://prntscr.com/ca5caq

Let’s add a selector there with minimum and maximum font-size – http://prntscr.com/ca5cgm

Then use the selector in Class field for your Custom Headlines – http://prntscr.com/ca5cq2

4-Please add the following code to Appereance > Customizer > Custom > CSS

@media(max-width: 769px) {
.page-id-3069 .x-column {
text-align: center;
}
}

5 Please add the following code to Appereance > Customizer > Custom > CSS

@media(max-width: 769px) {
.dwlsection {
  width: 100%;
text-align: center;
}
}

6 Please add the foollowing code to Appereance > Customizer > Custom > CSS

@media(max-width: 769px) {
.home .x-column.x-sm {
    padding: 10px !important;
} }

Hope that helps,

Joao

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

@media(max-width: 769px) {
.dwlsection {
  width: 100%;
text-align: center;
}
}

To :

@media (max-width: 769px){
.dwlsection {
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
}

#5 Remove inline CSS width: 50%; from text element and add custom class dwlsection to text element.

In regards with promo boxes, feel free to adjust the height in following block of code :

.prbox {
    min-height: 629px;
}

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please enable ‘marginless columns’ option. You may need to add some left padding to right column.

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this :

@media (max-width:480px){
.gridimg {
    float: none;
    margin: 0 auto;
}
}

Hope it helps.

[yhshin1020]

Thanks!!!!

[Paul R]

You’re welcome! 🙂

[Author]

Posts