CSS help with the footer cloud graphic not showing on small devices?

Hi, could i please have some help with the footer area of my site.

when at normal desktop resolution the footer looks great with the cloud graphic, however in mobile mode i.e. smaller screen sizes it seems not to have that cloud graphic appearing ?

here's screenshot taken in Samsung Note 4
- http://take.ms/4upOo
- http://take.ms/I0fbY

(it also seems like its disapeared on the desktop view of the site on this page ) - (uploads page when you add product to cart) - http://take.ms/7DDib

this is how it should look - http://take.ms/8XfT2

Domain - http://tinyurl.com/ounlhnf

Support Access is open

Thanks
Tom

  • Adam Czajczyk

    Hello Tom,

    I hope you're well today and thank you for your question!

    Could you please add this code to your child-theme style.css file?

    @media only screen and (max-width:360px) {
    	footer:before {
    		content: url("IMAGE_URL");
    		display:block;
    		top:-103px;
    		left:5px;
    	}
    }

    In case it didn't affect "cloud" display, please try this version instead:

    @media only screen and (max-width:360px) {
    	footer:before {
    		content: url("IMAGE_URL");
    		display:block;
    		top:-103px!important;
    		left:5px!important;
    	}
    }

    Best regards,
    Adam

  • Tom

    Hi Adam,

    tried adding the first checked did not see a change then replaced it with the second checked again and it also did not take effect? could you take another look for me please?

    also would you mind removing the domain name from your last post please and just put http://www.domain.com instead ?
    as i have had issues in the past with google caching these forum posts and then when someone searching for my domain all these support links show up which does not reflect the brand positively. Could i also ask that you do not post any image / brand name and use some kind of placeholder instead like domain.com ?

    thanks
    Tom

  • Predrag Dubajic

    Hi Tom,

    Sorry about that, we usually tend to remove mentions of user sites from comments but sometimes it get's missed, I have replaced image url with IMAGE_URL placeholder.

    Can you try with this code for phones:

    @media only screen and (max-width:360px) {
    	.site-footer:before {
    	    bottom: 105px!important;
    	}
    }

    Regarding the cloud when there's a product in cart, the button added to your footer increases the footer height and it goes over the cloud image.

    Can you try going through your custom CSS code and replace all mentions of .site-footer:before with this .custom-links-holder:before
    I could test how exactly this will behave by using only browser inspector tool so I would suggest making a backup of your current CSS before making changes.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.