Font and image sizes on mobile version

Hi there,

I am wondering if there is a way to change the font and image sizes just in the mobile version of my website. On the desktop version, I want to have bigger images and headlines, but when I open it on the mobile version, things get messy because of paddings and headlines are to big and can´t fit the screen.

Any help?

My website is missoesnoroeste.org

Thanks

Hello @nandoanversa,

Thanks for writing in!

I have seen your site in a mobile screen. The headings are quite big enough. You must apply responsive text and manage it in Settings > Responsive Text.

To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps.

Thanks a lot. It worked!!
And how can I do the same with images? Some images are not scaling down

I would also like to know how to make text inside ACCORDION be responsive

Hi There @nandoanversa

If you use the Image element, your images will be responsive automatically. Please refer to the following post (https://theme.co/apex/forum/t/responsive-images-and-column-widths/9169/2?u=mldarshana).

Please apply responsive text settings on your Accordion as well. Refer to the following video guide if needed (https://www.youtube.com/watch?v=C8PFBUOiGvM&feature=youtu.be).

If you’re using a caching plugin, make sure to purge full cache before testing (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you’re still having issues, provide us with your example page URL to test your issue further.

Thanks!

Hi there,

Talking about the images, I wanted to know if an image which is already small and will fit on a mobile device, could get even smaller. i have images of icons and they get disproportional when seen on the devices.

About accordion, i still didn´t understand how can I target a specific text within accordion and make that responsive. I have no options to customize specific text with code. I can do that easily with headleines and normal text, but can u guide me through the process of doing that inside accordion element?

Thanks a lot

Hi @nandoanversa,

Regarding the images, yes they will get even smaller if there container became small than there own width, that is the responsive behavior of the Image element, Unless you set a static width on them and large padding and margins on the containers can be a factor too.

I did check your page so I understand why you used such huge padding and margins. What can I advice is instead of re-setting those margin and padding on mobile view, please utilize the Hide During Breakpoint feature. The idea is to have a different container (section or row) for desktop view and for mobile view. No, you don’t need to do this for all your sections, only those sections that become messy on mobile view.

Regarding Accordion, please use the (V2) Accordion Element (not the classic accordion). It has the text formatting and text styling option same as the headline.



Make sure you’re inspecting the Accordion itself and not the Accordion Item.

There are other ways to make your text responsive not only with Responsive Text feature, please follow this post for more details.

Cheers!

Thank you very much. All your advice were put into practice and worked very well

Thanks again!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.