Search the Community
Showing results for tags 'weebly'.
Found 2 results
-
Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
-
Hello everyone, I'm very much a novice in this arena, so apologies in advance, but hopefully someone will be able to help. I'm in the process of creating a new website using the Weebly sitebuilding system, which gives you fairly extensive access to the HTML and CSS elements of the site. Generally the build is going relatively well, but I'm running into a few problems with the mobile version of the site. Because the theme I'm using is responsive, there isn't direct access to edit the mobile site in the same way as I have been building the rest of the site. What I am hoping is to work out HTML/CSS fixes for the following two issues: 1) Site banner is cut off at left and right and inexplicably scrolls right into some dead space. 2) Hide home page navigation buttons, which are useful for desktop, but fill up a lot of screen space on mobile/tablet and so are not needed (as there is a hamburger menu in any case). I've attached some screenshots of the elements I'm talking about and can copy and paste any elements of code which I have access to. I suspect that a combination of HTML and CSS adjustments will be needed. The site itself is located at http://www.passthecontroller.co.uk. You can access the home page directly (which should demonstrate both issues) at http://www.passthecontroller.co.uk/home.html.
