Search the Community
Showing results for tags 'container'.
Found 5 results
-
Site URL: https://echidna-gardenia-fcb4.squarespace.com/ I have made a blog post template using Image Blocks, however I am keen to have unconstrained image heights for each blog post so viewers can see the full image. When in editing mode, the images appear with set widths and different heights (which is what I want). However, when viewing the desktop version and mobile versions, the Image Blocks become constrained, cropping each image to fit within the same height box. I have tried altering the container size, image block heights and overflow, however none of these tweaks are working. Examples below and any help would be greatly appreciated! Thank you! Editing Mode - how I would like the images to display using different heights: How images are displaying in the desktop and mobile versions - all constrained in set squares: -
Here is a partial screenshot - in edit mode, hovering the mouse over a single image shows extra space on the bottom. The blue container is uniform on the sides and top, but not the bottom. Here is what's currently enabled in the image-edit Design mode: - Inline Image - Captions are turned off - Image is stretched to span the container - Every and all combination (to my knowledge) of these Design choices does not resolve the problem. I'm guessing some code can get rid of it - any ideas?
-
HTML/CSS overlay does not work in Squarespace
macchi92 posted a question in Coding and Customization
Hey all, I am trying to create a specific effect for my website. I have an image and on Hover I would like to display a black overlay on slight transparency+some text formatted in a specific way. I tried to do it with the Squarespace default way but I couldn't manage so I tried to use the HTML+CSS customization but still I am struggling. Something with the way I am specificing the text size based on the vw is breaking things. Any help? Adding video and image This is the CSS .container { position: relative; width: 50%; } body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; padding: 2vw; background-color: rgba(0,0,0,0.7); } .container:hover .overlay { opacity: 1; } .Title { color: white; font-size: 5vw; position: relative; text-align: left; } .SubTitle { color: white; font-size: 3vw; position: relative; text-align: left; } .Synopsis { color: white; font-size: 2vw; position: relative; margin-top:30%; text-align: left; } .credits { color: white; font-size: 1.8vw; position: absolute; bottom: 0.5vw; text-align: left; line-height:70% } .overlay {color: white;} This is the HTML file <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Passione</title> <link href="../css_sheet.css" rel="stylesheet"> </head> <body> <div class="container"> <img src="passione.png" alt="Avatar" class="image"> <div class="overlay"> <div class="Title"> Passione </div> <div class="SubTitle">a John Turturro Film</div> <div class="Synopsis"> <p><p><strong>Synopsis</strong><br></p> <p>Filmed in Naples, Italy, Passione is the fourth film directed by John Turturro and released in the United States in June 2011. The movie chronicles the rich world of contemporary Neopolitan music tracing the influences of European, African and Arabic cultures in a wild, colorful and sexy musical adventure. Passione was present at the 67th Venice International Film Festival, won the Capri Cult Movie Award, the “Movie film festival of Salerno" and the City of Loano prize.;</p> <p><br></p> </div> <div class="credits"> <p><strong>Director:</strong> John Turturro</p> <p><strong>Role:</strong> Production Coordinato</p> <p><strong>Release:</strong> June 22nd 2011</p> </div> </div> </div> </body> </html> Screen Recording 2020-08-08 at 14.18.52.mov -
Embedded widget not responsive after 950px
richardmowitz posted a question in Coding and Customization
Hi, Im using the medium width setting for all content on my site. When I embed a widget from Elfsight, set to display in full width, it stops scaling with the rest of the content after around 950 px. Does anyone know what may cause this issue? Im very thankful for some help here. Thanks, M -
Site URL: https://jimgoldberg.fr/ Hi, Everytime I click on any clickable element of my website a thin dotted line surrounding the object appears. (image attached) Would anyone know how to remove it using css codes ? Thanks in advance for you help 🙂 WEBSITE PASSWORD : Segura70
