Jump to content

swoopnebula

Member
  • Posts

    24
  • Joined

  • Last visited

Everything posted by swoopnebula

  1. I have tried everything in my ability to get the border radius for the first section their to work on mobile. It works fine on desktop at all sizes but when viewing it on an actual mobile device the image breaks out. I have tried: over-flow: hidden; Targeting the very root of the section block, section.page-section.full-bleed-section.layout-engine-section.background-width--full-bleed.content-width--wide.horizontal-alignment--center.vertical-alignment--middle { overflow: hidden !important; border-radius: 20px;} Targeting any and all container/div elements using the border radius and overflow hidden. Can anyone help me out with this? You will need to view the webpage on mobile to see the error. section[data-section-id="65b324446b04b27d83236cce"] { margin: 35px; border-radius: 20px !important; border: solid 1px #282828; overflow: hidden !important; } .page-section { overflow: hidden !important;} .section-background {overflow: hidden !important;} .section-background-content {overflow: hidden !important;} .background-image-fx {overflow: hidden !important;} .section-background-canvas {overflow: hidden !important;} .section-border {overflow: hidden !important;} section[data-section-id="65b324446b04b27d83236cce"] .section-background { background-color: transparent !important; border-radius: 20px !important; overflow: clip !important; } section[data-section-id="65b324446b04b27d83236cce"] .page-section { background-color: transparent !important; border-radius: 20px !important; overflow: clip !important; } section[data-section-id="65b324446b04b27d83236cce"] .section-border { background-color: transparent !important; border-radius: 20px !important; overflow: clip !important; }
  2. The issue can be seen here, this occurs with each summary block, resulting in inconsistent spacing across each section. The spacing between each section when the page is increased or decreased in the viewport width changes.
  3. This is causing uneven margin at the bottom of my summary block sections, bleeding the content over into the next section. Any help regarding the issue is appreciated. Here is the webpage: https://thevisualpharmacy.com/faq
  4. Hey everyone, Would anybody happen to know how to remove the additional whitespace at the bottom here? I'm using custom code. I was able to get it removed by switch from the "code" panel to the "markdown" panel for section blocks but I have noticed that it comes back whenever I make an update to the page.
  5. Hey everyone, I'm trying to create some equal height section blocks that can be re-used across my site but i'm having some weird issues going on, where the columns aren't aligning to the top, and the 3 columns keep breaking into 2 can anyone provide some help. much appreciates, <body> <div class="community-widget-container"> <div class="community-widget"> <div class="community-img-container"> <img class="card" src="https://images.squarespace-cdn.com/content/5e698edaeac474366d81c662/c836313d-6d46-4521-a980-00c9e221d15b/graphic-design-community.png?content-type=image%2Fpng"> </div> <div class="card2"> <div class="cardtitle">Tutorials</div> <p class="community-summary">Watcffefewfwefwefwfwefwewfeh graphic design related tutorials, learn about design theory and recommended resources for growing and nurturing your graphic design skills. </p> <button class="community-button"><a href="">Watch Tutorials</a></button> </div> </div> <div class="community-widget"> <div class="community-img-container"> <img class="card" src="https://images.squarespace-cdn.com/content/5e698edaeac474366d81c662/c836313d-6d46-4521-a980-00c9e221d15b/graphic-design-community.png?content-type=image%2Fpng"> </div> <div class="card2"> <div class="cardtitle">Tutorials</div> <p class="community-summary">Watch graphic design related tutorials, learn about design theory and recommended resources for growing and nurturing your graphic design skills. </p> <button class="community-button"><a href="">Watch Tutorials</a></button> </div> </div> <div class="community-widget"> <div class="community-img-container"> <img class="card" src="https://images.squarespace-cdn.com/content/5e698edaeac474366d81c662/c836313d-6d46-4521-a980-00c9e221d15b/graphic-design-community.png?content-type=image%2Fpng"> </div> <div class="card2"> <div class="cardtitle">Tutorials</div> <p class="community-summary">Watch graphic design related tutorials, learn about design theory and recommended resources for growing and nurturing your graphic design skills. </p> <button class="community-button"><a href="">Watch Tutorials</a></button> </div> </div> </div> </body> <style> .community-summary { flex-grow: 1; flex-shrink: 0; flex-basis: auto; } .community-widget-container { display: flex; flex-wrap: wrap; } .community-button a { color: white; } .community-button { padding: 10px 20px; border-radius: 20px; color: white; background-color: #0D0D0D; border: none; font-weight: bold; } .community-widget { box-shadow: 0px 15px 15px #6cbbf8; border-radius: 15px; background-color: #1D9BFC; width: 30vw; margin: 10px; display: flex; flex-direction: column; } .card { height: 150px; display: block; margin: 0 auto; } .community-img-container { height: 150px; width: 100%; } .card2 { border-radius: 0px 0px 15px 15px; display: inline-block; background-color: #f2f5f8 !important; color: #0D0D0D; line-height: 22px; flex: 1; /* added */ padding: 10px; display: flex; flex-direction: column; } .cardtitle { color: #1D9BFC; font-size: 24px; font-weight: bold; } </style>
  6. I would like to have 2 options for products, one that's "add to cart", adds the item to the cart; and another button that's "buy now" takes them directly to checkout.
  7. Can you sell single courses with squarespace members areas? Or is there another way to do this? For example if I had one video that was roughly 2 hours long, could I sell this as a single course?
  8. Is it possible to have multiple checkout buttons integrated within the Squarespace platform using plugins or any other method, and if so, can you provide some guidance or resources on how to accomplish this task?
  9. Hey! I am looking to do something similar to this for my site shop. How did you get the pagination for the overall storefront?
  10. Site URL: http://www.thevisualpharmacy.com I have some custom styling on my nav menu. Upon enabling the Customer Accounts functionality, when scaling down the browser window to near phone size the Login/Accounts link starts to take on some odd spacing next to the social icons. It happens at a media query that I have set for around 991px, I have tried adjusting margin, padding, display settings, and positioning, but nothing seems to really solve the issue. Would anybody possibly be able to lend a hand or offer a potential solutions?
  11. Site URL: http://www.thevisualpharmacy.com I want to enable customer accounts on my Squarespace website but the white and muted black colors that are standard to Squarespace functionalities do not align with my brand's style guides. Is there any way I can change these colors revolving around customer accounts with / without using custom CSS?
  12. Site URL: http://www.thevisualpharmacy.com I want to enable customer accounts on my Squarespace website but the white and muted black colors that are standard to Squarespace functionalities do not align with my brand's style guides. Is there any way I can change these colors revolving around customer accounts with / without using custom CSS?
  13. Site URL: http://www.thevisualpharmacy.com Hey All, I have a custom button that I have created for my products page that links off to an external site for people to purchase from. I have hidden the original purchase button and I am styling the new link using CSS to target the link. I am now trying to add a class to the URL Link using JQuery but I can't seem to get it right. I stumbled upon this code snippet here but upon using inspect element It doesn't show that the class has been added. $(function(){ var cUrl = window.location.href; $("a").each(function(){ if ($(this).attr("thevisualpharmacy.gumroad.com/l/nintendo64mockup") == cUrl){ $(this).addClass(“gumroad-button”-); } }); }); I have loaded the JQuery Library, I am not an expert at JQuery by any means. Any insight to this is helpful. Thank you guys.
  14. I'm uploading images that I dont want people ripping from my webpage, or inspect element. is there anyway I can potentially hide the right click or get rid of both the right click and encrypt the link from the inspect element. i'm using the mark novo template.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.