Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

XianNewman

Circle Member
  • Posts

    70
  • Joined

  • Last visited

Posts posted by XianNewman

  1. 5 hours ago, tuanphan said:

    Q1. Can you expplain clearly? include screenshot?

    Q2. You solved this?

    Q3. You can combine some code

    eg. If you want to target 6 image blocks on this section:  Shuswap Communities you can try this code

    [data-section-id="60e9d42db6736875596e18bb"] .image-block {
    padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }

    Do similar for other code

     

    Thank you, @tuanphan.

    I tried this approach before, and it didn't work.

    Here's the problems:

    1. Theres no/minimal padding between the sections. My friend wants normal section padding (he only wants to alter the padding between the image blocks).

    2. The spacing around between the image blocks should be 5px.

    3. In mobile view, there's a problem with the right margin.

    Image uploads aren't working right now, so I recording a short video to explain, instead:

    https://www.loom.com/share/393e04760d4c45ab9decb3ab62f91a24

    Screen Shot 2021-07-11 at 07.54.31.png

    Screen Shot 2021-07-11 at 07.55.00.png

     

  2. Site URL: https://desormeaux.squarespace.com

    Hey everyone.

    Helping a friend get his real estate website off the ground.

    I've used custom CSS to get the home page layout he's after: near full-bleed images (with uniform 5px spacing on all sides).

    desormeaux.squarespace.com/home (password: realtor)

    Problems:

    • The code I've applied has adjusted the vertical padding of each section - I only want to impact the spacing around the image blocks.
    • On mobile, the page can be panned left/right (as if there's content off the right edge of the page - something with the margins is off)
    • The code I've applied has a lot of fat I think could be trimmed to make the page load more efficiently.

    Anyone know how to do this right? 😂 

    Here's the code I've applied:

    <style>
      /*buy sell section*/
    section[data-section-id="60e9c627b630645a0efcd2d9"]
    {
      margin: 20px;
    }
    section[data-section-id="60e9c627b630645a0efcd2d9"] .content-wrapper {
      margin: 5px;
        width: 100%;
        max-width: 100%;
      padding: 5px !important;
    }
      #block-yui_3_17_2_1_1625934021518_9588.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
        #block-yui_3_17_2_1_1625934021518_10525.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
      /*communities section*/
      section[data-section-id="60e9d42db6736875596e18bb"]
    {
      margin: 20px;
    }
      section[data-section-id="60e9d42db6736875596e18bb"] .content-wrapper {
      margin: 5px;
        width: 100%;
        max-width: 100%;
      padding: 5px !important;
    }
      #block-yui_3_17_2_1_1625937885947_14138.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
    
        #block-yui_3_17_2_1_1625938476515_5348.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
    
          #block-yui_3_17_2_1_1625938476515_7440.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
      
          #block-yui_3_17_2_1_1625938476515_9589.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
      
          #block-yui_3_17_2_1_1625938476515_11205.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
      
          #block-yui_3_17_2_1_1625938476515_12618.sqs-block.image-block {
        padding: 5px ! important;
      margin-top: 0% !important;
      margin-left: 0% !important;
      margin-right: 0% !important;
    }
      
    
      </style>

     

  3. @Jo_SQSP I'm trying to use a promotional pop-up for 'housekeeping' purposes and want the button to simply close the pop-up after the visitor has accepted terms/verified age/etc.

    I've tried entering # as the address the button links to, and leaving it blank. Upon clicking the button, it opens the current page in a new tab.

    Since you made this suggestion, can you please share with us how to make it work as you described?

    Thanks!

  4. On 6/9/2021 at 8:13 AM, kerstinmartin said:

    This is unbelievable.  A message like this belongs in a privacy or cookie policy, a website builder should never FORCE us to display it like this on our websites. It completely disregards design asthetics and our autonomy as business owners.

    Do other email providers do this as well?

    Noticed this on a client site this morning.

    Totally agree with @kerstinmartin - it's bonkers!

    Thanks @paul2009 for the recipes 😂 

  5. Here's the code I wound up using, that did the trick:

    // header title
    .header-title-logo a:after {
        content: "JOHN ALDAG";
        display: inline-block;
        font-size: 24px;
        font-family: Lato;
        color: white;
        text-align: center;
        vertical-align:middle;
        font-weight:900;
        padding-left: 20px;
    }
    .header-title-logo img {
        vertical-align: middle;
    }

    @tuanphan My only question is, how would I make it a different font colour on blog item pages only?

  6. 29 minutes ago, Wolfsilon said:

    Hello,

    To lift this from the website you provided, we can copy the "src" for the iframe and use it to generate your own widget. I used a online tool called "iframe generator".  Just place an embed block and insert the code. Then you can position it accordingly.

    
    <iframe src="https://candidatecentral.liberal.ca/hero-voter-id/?riding_id=59007" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>

    Hope this helps,

    -Dan

    That's amazing! I've never used a tool like that before.

    Now that I've embedded it, can I customize the styling for my site only (i.e. change the colour of the text fields, field, text, button, button text? 

  7. 14 hours ago, tuanphan said:

    Add to Design > Custom CSS. If it works, let me know. We will check other questions

    
    /* Tablet */
    @media screen and (max-width:1024px) and (min-width:768px) {
    /* q1. homepage banner */
    [data-section-id="6098017816396460ff8f7ea5"] .content {
        width: 70% !important;
    }
    /* q3. about 2 columns */
    div#block-b1455df1fb8a28d4d014+.row>.span-3:nth-child(-n+2) {
        width: 50%;
    }
    div#block-b1455df1fb8a28d4d014+.row>.span-6 {
        width: 100%;
    }
    /* q4. about banner text */
    [data-section-id="5f926682a85f076f863e2ae8"] .content {
        width: 70% !important;
    }
    /* q5. Google workspace */
    [data-section-id="609998f1f93ae5050fa14a32"] .content {
        width: 90% !important;
    }
    }

     

    Ahhhh.... I see what you're doing here.

    Just installed the code and am testing it out. So far, so good!

    Do you think I should I adjust all the banner text to the same width for consistency?

  8. 54 minutes ago, tuanphan said:

    @XianNewman I see your site has some problems. Do you need to fix these?

    Site URL – https://risedigital.tech/

    1. (Tablet-Homepage) Increase text width a bit?

    risedigital.tech-01-min.png

    2. (Mobile-Footer) Align center logos or make them side by side?

    risedigital.tech-02-min.png

    3. (Tablet-About) Change to 2 columns?

    risedigital.tech-03-min.png

    4. (Tablet-About) Increase text width?

    risedigital.tech-04-min.png

    5. (Tablet-Google Workspace) Increase text width a bit?

    risedigital.tech-05-min.png

    6. (Tablet-Web Design) Change to 2 columns?

    risedigital.tech-06-min.png

    7. (Tablet-Podcast) Change to 2 items/row?

    risedigital.tech-07-min.png

    8. (Tablet-Podcast posts) Increase text width?

    risedigital.tech-08-min.png

    Thanks for the feedback. 
     

    All of these are automatically formatted by Squarespace. 
     

    2. I meant for them to be centred. 
     

    1, 3-8. All of these are automatic responsive adjustments by Squarespace. In mobile, desktop, and tablet landscape, they look good. In tablet portrait, not so good. Any recommendations to fix without messing up desktop styles?

  9. First, thanks for the recommendation - that extension is GOLD! I've always opened Inspect (Chrome) or Source (Safari) to find the IDs the hard way 😂 

    Second, thanks for the feedback... I'm tying up loose ends on a redesign (I neglected my own site for a long time while I took better care of client sites).

    Third, do you happen to know which CSS property to target for aspect ratio? If it's convenient, could you paste a sample snippet I can customize for my situation? Never worked with aspect ratios before.

    Christian

  10. Site URL: https://risedigital.tech

    Hi there.

    I have two blog sections on my site.

    1. Blog, where I want the images (mostly landscape screen shots) on the blog page to be 3:2 aspect ratio.

    2. Podcast, where I want the images (entirely podcast-style album art) on the blog page to be 1:1 square aspect ratio.

    After changing formatting the respective blog pages 100 times (rough estimate) and my changes not 'sticking' I was able to determine that if I change the format of one blog (even though I do it on its own page, not globally in the styles interface), it oddly changes the format of the other, completely unrelated, blog.

    Assuming this is (bizarrely) intended behaviour and not a bug, does anyone know how to apply a specific aspect ratio to one blog page's images and not the other?

    Christian

  11. 40 minutes ago, Agha_Waqas said:

    add below code into css editor

    @media (max-width: 1024px){
    #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;}
    }

    That worked beautifully, thank you!

    CSS newbie question: Is the intention of the z-index value to set the relative depth of an object on a page?

    Also, curious why you used max-width: 1024px as I've seen many use 767px as the mobile threshold.

    Christian

  12. Site URL: https://risedigital.tech

    Hey Squarespacers!

    I installed a Google Review badge on my site, which presents a problem with the nav button in the mobile menu (7.1).

    Not sure if the best approach is to try and remove the badge when mobile menu opens, or move the button up so it's not covered by the badge (I think I prefer the latter).

    Any bright ideas how to fix this with CSS? 

    IMG_DA0C7C930D6D-1.jpeg

  13. 2 hours ago, kerstinmartin said:

    There might be a way to do this with CSS but I don't know the code off the top of my head.

    I am wondering though, why would you want to hide the 'from'? Is that not misleading when people then click on the dropdown list and see the different prices because you have set the expectation that it's all the same price? Plus, the from indicates that there are more options which can people make curious and entice them to check out the different options. That's just how I would feel as the consumer.

    In this case, it's pretty straightforward. One variant is a single bottle of wine, the other is a case of 12 bottles, at a discount. Customers won't be let down, they'll be delighted at the opportunity to buy more and save.

×
×
  • Create New...