Need help with a few little tweaks for mobile on my site

Hi :slight_smile: I need a bit of help styling my site to look better on mobile for thetruthaboutgoldfish.com. I have it password protected to keep the spiders out until it is ready, but you can see it by using the password saxophone007. I want to...

- Remove the boxed/borders on the side layout on mobile

- Get rid of the extra padding for the words on mobile on each side of the content

- Make it so the words aren't so squished in the "Yes, I want to keep my goldfish alive and well" list at the bottom on mobile

But, I don't know how to do any of these little things haha. I would really appreciate the help :slight_smile: Thank you in advance!

  • Rupok
    • Support Ninja

    Hi Meredith, hope you had a wonderful day.

    - Remove the boxed/borders on the side layout on mobile
    - Get rid of the extra padding for the words on mobile on each side of the content

    You can do these with following custom CSS Code:

    @media screen and (max-width: 480px) {
    #Wrapper {
      max-width: auto !important;
    }
    .section_wrapper, .section.full-width:not(.no-margin-h) > .section_wrapper, .container, .four.columns {
      max-width: calc(100% - 20px) !important;
    }
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    I'm not exactly sure about your requirement in the third issue. Can you please provide little more details so we can understand better and give you proper custom CSS code to make it work?

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Meredith
    • The Bug Hunter

    Thank you for the code. I will check it tomorrow on the phone. For the last issue I mean, there is a section near the bottom with an orange background. There are icons that are arrows pointing to different sentences. On mobile these arrows are pushing the sentences so they are hard to read. Sorry if that still sounds confusing.. :slight_smile:

  • Nithin
    • Support Wizard

    Hi Meredith,

    Hope you are doing good today. :slight_smile:

    Make it so the words aren't so squished in the "Yes, I want to keep my goldfish alive and well" list at the bottom on mobile

    Could you please try the following css code, and check whether it works:

    @media screen and (max-width: 480px) {
    .list_item .list_left {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 30px;
        text-align: left;
    
    }
    
    .list_item .list_right {
        margin-left: 42px;
    }
    
    }

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Meredith
    • The Bug Hunter

    Just checked on iPhone, the grey boxed borders are still on each side... can we put something in there to take it off? Thanks :slight_smile:

    Also, is there a way to remove those big arrows at the very bottom on the mobile phone? Because they don't really make sense there.

  • Nithin
    • Support Wizard

    Hi Meredith,

    Hope you are doing good today. :slight_smile:

    Could you please try the following CSS, and check whether it works:

    @media screen and (max-width: 480px) {
    
    	.image_frame .image_wrapper {
    		display: none;
    	}
    
    	@media only screen and (max-width: 767px) {
    	#Wrapper {
    	    max-width: 100% !important; 
    
    	}
    	}
    }

    This should remove the grey box, and the big arrows at the bottom of the page. However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles.

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Meredith
    • The Bug Hunter

    Hi Nithin,

    Thank you for that, it definitely worked... but a little too well. It hid all of my other images on the page too, not just the arrows. My picture of Penelope the fish is gone and my premium support graphic is gone. Is there a way to bring them back but still hide the arrows? Thank you so much for your help.

  • Nithin
    • Support Wizard

    Hi Meredith,

    It seems like all the images use the same class name, so it's gonna remove all the images related to these class, is it possible to add a unique class to these arrow images, through your theme?, so that we could provide an exact CSS to hide it, if you are not sure about this, please enable support access.

    If there isn't any such option to add a class, for a workaround you could replace the above code:

    .image_frame .image_wrapper {
    		display: none;
    	}

    Replace the above code, with this new one:

    #Content > div > div > div > div:nth-child(15) > div > div > div:nth-child(1) > div > div > img {
    		display: none;
    	}
    
    	#Content > div > div > div > div:nth-child(15) > div > div > div:nth-child(3) > div > div > img {
    		display: none;
    	}

    This CSS won't work, if you change the elements order, or it's layout, and it's more of a workaround, if you aren't able to add a class.

    I hope this helps. If you still have issue, please enable support access. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi Meredith,

    Hope you are doing good today. :slight_smile:

    I checked in our system, and I don't see any support access enabled for the domain: thetruthaboutgoldfish.com

    Please advise if I had missed out anything, and let us know once you enable access, so that we could give a look. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi Meredith,

    Hope you are doing good today. :slight_smile:

    Thank you for granting support access, I checked your website, and have made the following changes. I have added .lt-arrow, and .rt-arrow for both your arrow images, and have replaced the following CSS in the old code, and have also cleaned up the above CSS in your theme options.

    .lt-arrow, .rt-arrow {
    	display: none;
    }

    I checked these changes in your website, and it seems to work fine. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.