[guybower1Participant]

hi

I am wondering if I can use the Responsive Text feature on the headings of my accordion FAQ page.

The size is currently handled by CSS with the following:

.x-accordion-heading .x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    background-color: #000;
    color: #fff;
    font-size: 18px;
}
.x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: #000000;
    color: #FFFFFF;
  	font-size: 18px;
}

Would I just remove the size element and add .accordion to the Responsive Text feature?

URL is feastthailand.com

cheers

[guybower1Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I’m sorry, you can’t add custom class to accordion title to control its size with responsive text element.
Please use following custom code :

@media (max-width:767px){
.x-accordion-heading .x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    font-size: 12px;
}
}

Hope it helps.

[guybower1Participant]

fantastic Christopher. I assume that there could be multiple entries to cover the varied screen sizes. I will try it shortly and let you know, but that will be great.

Perhaps I won’t use responsive text at all, but stick with the media queries to handle screen sizes.

What would you suggest as enough sizes to cover most screen types?

480px
767px
979px
1200px
2???px

cheers Christopher

regards

[ThaiModerator]

Hi There,

These screen sizes are enough:

480px
767px
979px
1024px
1200px

Regards!

[guybower1Participant]

cheers Christopher

Regards

[Prasant RaiModerator]

You are most welcome. 🙂

[guybower1Participant]

Prasant

Based on above, is it possible to put multiple class IDs in the one media query?

As an example, if I had text IDs called body, instagram, history, link etc

Would I add the further ones like below, or must they each be separate?

@media (max-width:767px){
.x-accordion-heading .x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    font-size: 12px;
.body {
    font-size: 10px;
.instagram {
    font-size: 14px;
.link {
    font-size: 12px;
}
}

cheers

[JoaoModerator]

Hi There,

It is possible, but you have to close your { once you open them.

SO the correct code would be:

@media (max-width:767px){
.x-accordion-heading .x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    font-size: 12px;
}
.body {
    font-size: 10px;
}
.instagram {
    font-size: 14px;
}
.link {
    font-size: 12px;
}
}

And sometimes just .instagram won´t be enough, you need to inspect and be more specific, for example, if you have a <p> with a class instagram your CSS will be p .instagram { font-size: 12px; }

On CSS:

<p> or <div> become p or div

class: instagram becomes .instagram

ID instagram become : #instagram

Hope that helps

Joao

[guybower1Participant]

hi Joao

Thanks so much for your detailed response.

Everything seems to resizing correctly except the text above the instagram feed. It has a class ID of instagram and I have just put in the following into a media query.

@media (max-width: 767){
.instagram {
  font-size: 16px;
}
}

The normal font size is 18px and I just want it to drop slightly for mobile devices.

The font size does not shift at all, though. All others have been fine. I even tried adding into the text area where it has JOIN US ON INSTAGRAM FOR NEWS, PICS & UPDATES

<div class="instagram">
JOIN US ON INSTAGRAM FOR NEWS, PICS & UPDATES
</div>

but that didn’t help either.

Any further suggestions?

cheers

[Paul RModerator]

Hi,

You can try this code instead.

@media (max-width: 767){
.home .instagram {
  font-size: 16px !important;
}
}

Hope that helps.

[Author]

Posts