smotheredbutta Posted April 26, 2022 Share Posted April 26, 2022 Site URL: https://www.pillarsresearch.org/our-team Hi -- I'm trying to figure out how to fix the mobile view of a certain page on my website. Specifically: - Hyperlinking images in code blocks: I have images that preview a different image on hover. I want those images to be hotlinked to another page on the site. - Change sizing of those same images in mobile view: When you look at the website in mobile view, those images are very small and the buttons are very large. I want to enlarge the images or, if that's not possible, decrease the size of the buttons. I've tried a bunch of different options shared in this forum, but I can't find anything that works on 7.1. Help! The specific page is www.pillarsresearch.org/our-team Thank you!! Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 #1. First, add this to Design > Custom CSS a.tp-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } For first Code Block, edit this code <center><div id="img-hover1"></div></center> to this <center><div id="img-hover1"><a href="https://google.com" class="tp-link"></a></div></center> With second Code Block, edit code similar <center><div id="img-hover2"><a href="https://google.com" class="tp-link"></a></div></center> #2. Add to Design > Custom CSS /* Our Team Image */ @media screen and (max-width:767px) { [id*="img-hover"] { width: 100% !important; height: 300px !important; background-size: cover !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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