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

pixies1

Member
  • Posts

    45
  • Joined

  • Last visited

Posts posted by pixies1

  1. Thanks! To get this effect, I actually created one long image that scrolls continuously

    First create a 5900x390px image with your logos spaced out evenly (you can do this for free at Canva.com)

    Then add the code below to CSS (replacing my URL image with your own)

    Hope it works for you!

     

    //auto-scrolling logos//
    .slider {
      width: 135%;
      overflow: hidden;
      margin-left: -13vw;
      margin-right: 0vw;
      position: relative;
    }

    .slider .slider-image {
      background-image: url(https://static1.squarespace.com/static/60606ea81846b4151d82ec0b/t/60be85e8d976482627d1592a/1623098856396/Slider.png);
      width: auto;
      height: 150px;
      background-size: 2950px 200px;
      animation: slide 50s linear infinite;
    }

    @keyframes slide {
      from {background-position-x: 0px;}
        to {background-position-x: -2950px;}
    }

  2. Hi Tuan,

    I added both blocks of CSS (below) and now it looks right. Thank you!

     

    // testimonials - tablet 2 columns //
    @media screen and (max-width:991px) and (min-width:768px) {
    div#block-yui_3_17_2_1_1619732613520_13491+.row .span-4 {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    }
    // tablet testimonials //
    @media screen and (max-width:991px) and (min-width:768px) {
    div#block-yui_3_17_2_1_1619732613520_13491+.row .span-4 .code-block {
        width: 50%;
    }
    }

  3. Hi Tuan,

    This code no longer works for the projects section on my homepage:

    @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1620053642909_82057+.row .span-3 { width: 50%; } }

    I would like the 4 columns to appear as 2 columns in tablet view.

    And on my testimonials page, I'd like the 3 columns to appear as 2 columns in tablet view.

    https://www.typeaprofessionals.com/testimonials

    Thank you!

  4. 13 hours ago, tuanphan said:

    Add to Design > Custom CSS

    
    /* We do it all tablet */
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620053642909_82057+.row .span-3 {
        width: 50%;
    }
    }

     

    Worked, thank you! Is there a way to change the order of the columns in tablet view so the list reads in alphabetical order from top to bottom?

    Current:

    1st column     2nd column

    3rd column   4th column

     

    Preferred:

    1st column     3rd column

    2nd column   4th column

  5. Hi @tuanphan,

    I redesigned my site and now the code that you previously provided to me to make my projects list section look great in tablet view no longer works, and my attempts to rework your code have been unsuccessful.

    Can you please help me again? On my home page in the "We do it all. And then some." section, I'd like for that list of four columns to appear as just two (alphabetical) columns in tablet view.

    https://www.typeaprofessionals.com/

     

    Column 1: #block-yui_3_17_2_1_1620053498091_5173

    Column 2: #block-yui_3_17_2_1_1620053498091_5821

    Column 3: #block-yui_3_17_2_1_1620053498091_7815

    Column 4: #block-yui_3_17_2_1_1620053498091_9427

    🙂

  6. Site URL: https://www.typeaprofessionals.com/

    Hello!

    I need help making images in a summary block appear smaller in tablet view.

    I have a summary block with six client logos on my home page. They're a good size in desktop (three across) and mobile view (stacked).

    In tablet view, they stack like they do in mobile view and they're way too large. For tablet view, I'd like for them to be smaller and arranged two or three across instead of stacked, but I'm not sure how to do this because they're in a summary block.

    Summary block on home page: #block-yui_3_17_2_1_1618324013232_7451

    Please help, thank you!

  7. Site URL: https://typeaprofessionals.com

    Hi there, I'm using the Brine 7.0 template with the parallax scrolling effect for three images on my home page. 

    The images look fine on desktop and tablet view, but when I look at my site on my phone, I notice there is a black space below the images before they start scrolling (shown below).

    I'm using this CSS to make the header fixed--could this be cause of the black space problem beneath the images? Any idea how to fix? Thank you!

    //fixed header navigation//

    .Header.Header--top {
      position: fixed;
      top: 0px;
      z-index:1000;
      width:100%;
    }
    .Intro {padding-top:100px;}
    .Index {padding-top:100px;}
    .Main {padding-top:100px;}
    .Main.Main--page {padding-top:100px !important;}
    .Main.Main--blog-item {padding-top:0px !important;}

    @media only screen and (max-width: 480px) {
      .Main {padding-top:0px !important;}
      .Intro {padding-top:0px !important;}
      .Index {padding-top:0px !important;}
      .Main.Main--page {padding-top:0px !important;}
    }

    IMG_4590.PNG

    IMG_4591.PNG

  8. Hi bangank36, thank you! The buttons are now the same size, thanks to your code. I adjusted the width to add a little spacing between the buttons and I added a left margin to get them centered correctly on the page:

    margin-left: -5px;
    width: 75px;

    However, now the words "FILE UPLOAD" are not centered in the second button. Any idea how to correct this? Maybe I should have centered the buttons a different way than adding "margin-left"?

    Screen Shot 2021-04-13 at 9.52.00 AM.png

  9. Site URL: https://typeAprofessionals.com

    Hi all,

    I have two large side-by-side buttons at the bottom of my home page, with a spacer on each side to make them more centered on the page. The buttons are the same width as each other and look fine in desktop and mobile view.

    However, in tablet view, the "order form" button is slightly narrower than the "file upload" button and it looks bad that they're not the same width. I believe button width in tablet view is being determined by their text labels, and "file upload" is one character longer than "order form."

    If I remove one letter from the "file upload" button, then they're the same width in tablet view. But obviously I want to keep the labels as is. I also noticed that if I remove the spacers, then they're the same width in tablet view, but I don't want to do this either because I like them more centered.

    I've searched the forum on this but haven't found a solution. If anyone can come up with one using CSS, it would be much appreciated! Thanks in advance!

  10. Thank you so much for the effort! Unfortunately, when I try vw, I can't get the font sizes to look right across the devices and then they're all left justified instead of centered. I added margin and width to mobile view and that fixed the centering problem, but it also added extra space above and below the text. It's weird because it doesn't show up in the Squarespace mobile view, but it's showing up on my actual phone (attached screenshot).

    If I can now just get rid of the extra space in mobile so it looks like the other headers, I can live with the cursor going too far off to the right in mobile only. Here's my current CSS, including the header CSS I added in case that now needs to be adjusted to get rid of the extra spacing on mobile:

     

    //typing effect//

    .typewriter {
        font-family: Rubik, monospace;
        display: flex;
      width: 34em;
      margin: 0 auto;
    }

    .typewriter-text {
        display: flex;
          overflow: hidden;
         animation: typing 4s steps(20, end), blink 1s step-end infinite;
        white-space: nowrap;
      color: #006373;
        border-right: 3px solid #bdbdbd;
          box-sizing: border-box;
    }

    // mobile view //
    @media screen and (max-width:480px) {
    .typewriter-text {
        overflow: hidden;
    margin: 2.75em;
      width: 13.5em;

      }
    }

    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }

    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: #bdbdbd; 
        }
    }

    //fixed header navigation//

    .Header.Header--top {
      position: fixed;
      top: 0px;
      z-index:1000;
      width:100%;
    }
    .Intro {padding-top:100px;}
    .Index {padding-top:100px;}
    .Main {padding-top:100px;}
    .Main.Main--page {padding-top:100px !important;}
    .Main.Main--blog-item {padding-top:0px !important;}

    @media only screen and (max-width: 480px) {
      .Main {padding-top:0px !important;}
      .Intro {padding-top:0px !important;}
      .Index {padding-top:0px !important;}
      .Main.Main--page {padding-top:0px !important;}
    }

    IMG_4545.PNG

  11. Okay, I played around with width and margin and was able to get it looking great in desktop and tablet view. Hooray!

    However, now it's not centered in mobile view. Are you able to figure this last part out for me?

    Here's my revised CSS:

    //typing effect//

    .typewriter {
        font-family: Rubik, monospace;
        display: flex;
      width: 34em;
      margin: 0 auto;

    }

    .typewriter-text {
        display: flex;
          overflow: hidden;
         animation: typing 4s steps(20, end), blink 1s step-end infinite;
        white-space: nowrap;
      color: #006373;
        border-right: 3px solid #bdbdbd;
          box-sizing: border-box;
    }

    // tablet view //
    @media screen and (max-width:991px) and (min-width:768px) {
    .typewriter-text {
        overflow: hidden;
    }
    }

    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }

    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: #bdbdbd; 
        }
    }

     

×
×
  • Create New...