Docs

[isearchlocal]

hi, i have searched the forums and found some differing answers on this so would like clarification please.

I need to make all my headings and all text including footer text responsive,

currently the headers are too large and the footer text is not nice on a mobile.

– my problem is that there are over a 100 pages so far on the site and going in to each to add the code on the different elements is way too long a process.

Is there anyway i can do this site wide?

thank you for any help.

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[isearchlocal]

This reply has been marked as private.

[Christopher]

Hi there,

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

@media (max-width:767px){
h1,.h1{

font-size:24px;
}

h2,.h2{

font-size:22px;
}
h3,.h3{

font-size:20px;
}
h4,.h4{

font-size:18px;
}
h5,.h5{

font-size:16px;
}
h6,.h6{

font-size:14px;
}
}

Hope it helps.

[isearchlocal]

thanks chris, it worked on the main body, however no change to the footer content.

[Rupok]

Hi there,

Thanks for writing back. I can see this working on your footer content as well – http://prntscr.com/ar0tbt

If you want to target any heading within the footer content then you can do it like below :

.x-colophon-content h2 {
  font-size: 24px;
}

Place this within the media query above.

Cheers!

[isearchlocal]

This reply has been marked as private.

[Jack]

Hi there,

Thanks for writing back!

Can you try:

@media (max-width:767px){
	.x-colophon-content h2 {
		font-size: 24px;
	}
}

The other code on it’s own without the @media call wouldn’t work, for what you need 🙂

Thank you!

[isearchlocal]

thanks jack that worked perfectly on the header of the footer, however the rest of the content isn’t changing,
I’ve tried changing the CSS a bit but id didn’t make any difference.

Any ideas please?

[Christopher]

Hi there,

Please add this within media query rule :

.x-colophon-content span, .x-colophon-content a, .x-colophon-content span, .x-colophon-content font {
    font-size: 12px !important;
}

Then new code would be:

@media (max-width:767px){
h1,.h1{

font-size:24px;
}

h2,.h2{

font-size:22px;
}
h3,.h3{

font-size:20px;
}
h4,.h4{

font-size:18px;
}
h5,.h5{

font-size:16px;
}
h6,.h6{

font-size:14px;
}
.x-colophon-content span, .x-colophon-content a, .x-colophon-content span, .x-colophon-content font {
    font-size: 12px !important;
}
.x-colophon-content h2 {
		font-size: 24px;
}
}

Hope it helps.

[isearchlocal]

excellent, thank you it worked

i have one other request, which is un-related however im hoping you can help.

— i have my site set to full width on mobile.
— i utilise on most pages 2 columns
— column 1 looks great on mobile as its tabbed and i have 10px padding on the tabs
— column 2 needs to have some padding 5-10px either side, however – when i insert it at desktop level it makes no difference to the mobile version, and when i adjust the CSS for the fullwidth mobile view it affects the 1’st column which is tabbed and looks perfect on mobile.

I hope the above makes sense. i have attached a screenshot for you too.

hope you can help either make just column 2 have padding on mobile, or any other way you can think of doing it.

thank you

[Rupok]

Hi there,

Thanks for updating. You can give the second column a unique class name using the class field. Then you can set your padding for that column using the media query same as the headings on previous reply. You should be able to do it yourself since the media query example is already provided for the heading.

Hope this makes sense.

Cheers!

[isearchlocal]

This reply has been marked as private.

[Jade]

Hi there,

I have checked the other thread and it seems everything is sorted.

Cheers!

[Author]

Posts