Pip1 Posted June 28 Share Posted June 28 Hi, I'm trying to add two flag svg files to my header, both going to two websites. I adapted code that was found on this forum to do it, the flag icons look fine on desktop but when it shows on tablet and mobile it does not stay in the position beside the hamburger icon and one of the flags is no longer clickable on mobile view. Would anybody Know how to fix this, I'm sure I have the code wrong and need some help on the mobile query This is the code I've used <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us" /></a>').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.us { width: 30px; margin-left: -30px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ @media screen and (max-width:768px) { img.us { position: absolute; right: 28vw; top: 15px; } } </style> <script> $(document).ready(function() { $('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk" />').appendTo('.header-title-nav-wrapper'); }); </script> <style> img.sk { width: 30px; margin-left: 10px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ } @media screen and (max-width:768px) { img.sk { position: absolute; right: 20vw; top: 15px; } } </style> You can see the images I've attached showing it on desktop, then tablet and mobile, I'd like them side by side on mobile and clickable. Could anybody help me with this? Link to comment
MayaViolet Posted June 28 Share Posted June 28 Hi @Pip1, can you share the live link to your website (and pw if necessary) to be able to inspect the website live and give the correct solution? Thanks! Maya Link to comment
Pip1 Posted June 28 Author Share Posted June 28 Hi @MayaViolet sure https://manatee-flugelhorn-pmg9.squarespace.com/ pw: pip1 Link to comment
MayaViolet Posted June 28 Share Posted June 28 11 minutes ago, Pip1 said: Hi @MayaViolet sure https://manatee-flugelhorn-pmg9.squarespace.com/ pw: pip1 Hi @Pip1 so it looks like your code for mobile screens just isn't applying... can you try adding the !important tag after those elements? @media screen and (max-width:768px) { img.sk { position: absolute !important; right: 20vw !important; top: 15px !important; } } Link to comment
Pip1 Posted June 29 Author Share Posted June 29 Hi @MayaViolet, I tried that now but it doesn't seem to have changed anything, I think I might have the mobile break positioning off, it goes weird on tablet size and some mobile devices and the US. flag still isn't clickable on mobile, not sure why that's happening Link to comment
MayaViolet Posted July 1 Share Posted July 1 On 6/29/2024 at 1:50 AM, Pip1 said: Hi @MayaViolet, I tried that now but it doesn't seem to have changed anything, I think I might have the mobile break positioning off, it goes weird on tablet size and some mobile devices and the US. flag still isn't clickable on mobile, not sure why that's happening Hi @Pip1 - what about trying this code within the mobile media query? .header-display-mobile .header-title { max-width: fit-content !important; margin-right: auto !important; } Pip1 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment