Having trouble displaying on tablet and mobile version (illdy)

Hello,

I really like the Illdy theme it’s amazing but I’m having issues with how it’s displayed for mobile and tablets and could really use some advice or some css. unhappybanana.com is my website.
I also having issues with displaying the widgets on the footer.

Thank you!
Best regards,
Eros

Hello there,

I hope you are doing well today.

You can use the following CSS code to fix the responsiveness of the website by going to Appearance > Customize > Additional CSS and pasting it there.


@media (max-width: 500px) {
#latest-news .section-header h3 {
    font-size: 38px;
}
}

@media (max-width: 500px)
#header.header-front-page .bottom-header h1 {
    font-size: 32px!important;
}

Please keep me posted on the results.

Best Regards,
Support

Hello,

Thanks for the really quick response. It fixed my latest articles section so thank you for that.

I’m still having issues with the
1.header portion of it (the sizing of the letters fit.healthy.fun)
2.The contact us portion (the letters are running together)
3.team(the letter “r” in developer is cut off for my name)
4. the footer with the widgets are not displaying the widgets

with the pictures the 2 bottom ones are the footer how it’s displayed on desktop and on mobile.

Thanks again for helping me on this I really appreciate it.

Best regards,
EM

Hello again,

I also noticed there is an issue with the second line of coding Here is a pic of it not sure why.

Again thank you for all your help.

Hello,

I’m still having issues with displaying the footer. I have a signup form for it and share buttons with the logo for the site.
I’ve got the pics below of what it’s supposed to look like and what it looks like in mobile.

Please help this is really buggin me lol

Best regards,
Eros

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

  1. Header font size
@media (max-width: 550px){
#header .bottom-header h1{
   font-size:10px;
}
}

  1. In regards to the footer widgets, there seems to be some issue with responsiveness, I’ll have to bring this to the attention of the developer. for not I suggest hiding them in mobile view.

  2. Center button

/*center form button css*/
#contact-us .section-content .wpcf7-form p:nth-of-type(5) {
    display: grid;
    float: none;
    width: 20% !important;
    text-align: center;
}

Best Regards,
Support

thanks the code worked! I’m experiencing another issue with getting my mailchimp pop up. I want one so people can double opt in to my newsletter. I just don’t know how to insert the code. Here it is below

[mailchimp_subscriber_popup baseUrl=‘mc.us15.list-manage.com’ uuid=‘439281e9b9d9865df3f6cdd89’ lid=‘ae0b22c922’ usePlainJson=‘true’ isDebug=‘false’]

Thank you!