Search the Community
Showing results for tags 'container'.
Found 13 results
-
Site URL: https://www.mbc95.org/welcomecenter I am trying to add a Modal with an iframe in it to an external site on my page. I added bootstrap since I am familiar with it using the following code: <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> When I add this to the header of the page I am on (https://www.mbc95.org/welcomecenter) is causes the page to shrink the size of the container. The page should look like the main page of the site (https://www.mbc95.org/). Is there anything I can change to correct this? Thank you!
-
problems changing the background color of a container
mchere posted a question in Coding and Customization
Site URL: https://www.redarrowmedia.com/portfolio-copy Hi there, I'm having a hard time changing the background color of this container to gray. Can someone help me with the code? I don't understand what to put before the: { background-color: #c4c9d1!important; padding: 30px!important;} I've tried: div#row.sqs-row { background-color: #c4c9d1!important; padding: 30px!important; } but it doesn't work. I'm trying to get it to look something like the example: thank you so much for any help! -
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
-
Site URL: https://www.whitbycollegiate.school.nz/ Hi there, I want to reduce the height of my slideshow gallery on the homepage banner when displaying on mobile by about 50% but I can't work out how to change this. -
Reducing Left/Right Content Padding for Mobile Only
fred5 posted a question in Coding and Customization
I first just want to preface this with the fact that I unfortunately cannot post the website link due to it being for a client project that is a work-in-progress, and do not have permission to make the site live at this time. I am using the Camino template, and on desktop there is a pretty large left/right content padding. When on mobile, this padding translates to a very short line-length, and overall doesn't work well. This doesn't apply to the header or footer, just the content of each page. I am looking to reduce this left/right content padding for mobile only, ideally to the padding that the header and footer have on the site. I would really appreciate any help or guidance! Thanks -
How can I adjust the height of my codebox widget?
Aironwood posted a question in Coding and Customization
Site URL: https://www.cathodetv.com/ https://www.cathodetv.com/ Currently I have a codebox with two iframes aligned left and right. I wan to set the height to be 100% , as opposed to px. When I do, the codebox shrinks my iframes. Width is no problem. How do I increase the height of the codebox with css? -
Site URL: https://ray-harmonica-ta62.squarespace.com/produkter Hello! I created a site using an online store template. My site is going to show products, but only in a list on a page, I don't want them to be clicked. I don't know how to make the items in the online store module to not be clickable, and to have more text, so I added a section called Pricing with 3 collumns of image, text and price underneath. This is all I want, except I want the three collunmns to be full width like the store-module. See screenshot. Help please? Thanks!
-
How to have an image spill over a section border?
Mashaa posted a question in Coding and Customization
Template used: Classon I'm trying to have the an image in the top section spill into the other sections. This is a mockup for what I want: You can see that the light flare gradually dims into the next section of the page. Currently, I have this: The section border is cutting off my flare. I've tried various CSS code to try to extend the bottom margin, make overflow visible, etc but nothing has worked. My site is not live at the moment so I'm not sure how to give the url. Essentially, I just want to know how to let my spill over the top section border. Thank you! -
css Changing Padding/Blank Space on Container
JuliaGreenspan posted a question in Coding and Customization
Trying to make padding around a text block in a page section MUCH SMALLER. height of page section is way too big, leaving a lot of blank space -
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
