• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Accordions - How to make content scale to viewport?

Zepherine

Zep
Roleplay Availability
Roleplay Type(s)
Hello friends! I’m new to coding, but I’d like some help with accordions.

For some reason, it cuts off on mobile. I’ll include a screenshot here.

1B5B7AD9-884C-4685-8857-A856150F6A17.jpeg

Is there a way to go about this so that the contents in the accordion automatically scales to viewport? Would you be able to give me a sample on the accordion below?

I’d greatly appreciate in advance! Thank you!

Slide 1


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
Slide 2


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
 
you can probably just add 100% to it like so:
Code:
[accordion=100%]
{slide=Slide 1}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
{/slide}

{slide=Slide 2}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
{/slide}
[/accordion]

Slide 1


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
Slide 2


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
 
you can probably just add 100% to it like so:
Code:
[accordion=100%]
{slide=Slide 1}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
{/slide}

{slide=Slide 2}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
{/slide}
[/accordion]

Slide 1


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.
Slide 2


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam posuere mollis. Vivamus a urna ornare, commodo elit id, ullamcorper risus. Fusce vitae dapibus ex. Nunc consequat ligula vitae magna cursus tincidunt. Sed eget est eros. Vestibulum porttitor, neque sit amet finibus fermentum, diam massa porttitor felis, quis eleifend sem sapien nec nisl. Duis interdum leo eros, sed dapibus urna mollis non. Ut sed sapien ex. Curabitur turpis libero, lacinia ac ultrices ut, interdum id sapien. Donec non mi sit amet sapien laoreet consectetur id et turpis.

Aenean ac orci justo. Nunc vestibulum faucibus lorem nec iaculis. Sed laoreet eget erat vel viverra. Sed ut sem quis ipsum finibus laoreet. Suspendisse mollis laoreet imperdiet. Proin ullamcorper neque sit amet interdum venenatis. Maecenas non dapibus ex. Cras id luctus nisi, id placerat eros. Nam mollis libero nec ex mollis scelerisque.

Thank you so much! I didn’t think to change the actual accordion itself. I greatly appreciate it! :D
 

Users who are viewing this thread

Back
Top