Guest Posted August 3, 2020 Share Posted August 3, 2020 Site URL: https://www.missmegabug.com/ Hello! I added code to my footer code injection to have my logo appear when my website is loading. It looks fine on desktop and tablet, but it does not adjust well to mobile view (see photo below). I've tried customizing my code, but the changes I've made deactivate the load screen. Help! (Please. =)) I'm on Squarespace 5 using Foster template and my hosting plan is Advanced E-Commerce. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <script> $(function() { var loadLogo = $('header').find('img').attr('src'); $('.logoload').css('background-image', 'url(' + loadLogo + ')'); }); </script> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 500px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(300).fadeOut("slow"); }) </script> <script> $(window).load(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function({ $(this).nextUntil("h2").slideToggle(); }); }); </script> Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 You can add this to Home > Design > Custom CSS to set new image on mobile only @media screen and (max-width:640px) { .logoload { background-image: url(https://cdn.pixabay.com/photo/2020/03/09/14/54/seychelles-4916045__340.jpg) !important; } } If it doesn't work, try save & refresh & check in real mobile Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted August 28, 2020 Share Posted August 28, 2020 Hi there! I'm not trying to change my logo, I want my logo to be the loading screen whether on desktop, tablet, or mobile. I just want to shrink it on mobile so the entire logo is in view instead of cut off. Is there a way to do that? Thank you! Link to comment
IXStudio Posted August 28, 2020 Share Posted August 28, 2020 Hi Use this code in Design -> Custom CSS @media screen and (max-width:640px) { .logoload { max-width: 100% !important; background-size: 80% !important; } } Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.