Jump to content

JustinSeimits

Circle Member
  • Posts

    135
  • Joined

  • Last visited

Everything posted by JustinSeimits

  1. @l_o_t_u_s this may help and if not let me know and I can do a dive into your site and get you the css you need to make this happen. https://support.squarespace.com/hc/en-us/articles/231746347-Styling-Products-Pages
  2. @Craftedfurniture A lot of great stuff on your site, looks like you do some amazing work. I noticed some things that I want to point out and if you want me to dive deeper into this I can do so. But to start off with here are a few screen shots and corresponding ideas to fix them. Then the biggest thing I noticed was that on this page https://www.samryanfurniture.co.uk/restoration-gallery-wood-furniture-restorer-furniture-restoration-furniture-repair-woodwork-repair you really dont have a call to action on the page that jumps out at the customer. I would assume your goal is to have a potential customer on your website book time to speak with you or book an appointment to get work done? Next is this page https://www.samryanfurniture.co.uk/furniture-products-gallery-furniture-making-hand-made-woodwork-wooden-furniture Are you not selling these online? If not you should be, you have people on your website sell them an amazing hand crafted wood product. Here is a great article about how Starbucks used data they collected on customers to help them figure out that online sales are the wave of the future and now is the best time to jump on board the train. https://www.inc.com/justin-bariso/starbucks-pickup-is-a-smart-covid-related-adjustment.html 1) Text is too small 2) I would change the color of the mouse or hover over to match the blue green color on the rest of the website 3) again text is too small 4) text is too small and ver hard to read, along with being confusing. ( I would not say what the image is rather what the section below is OUR MISSION ) I hope that you can make these updates and get more out of your website, if you want more info please feel free to message me directly. I only spent 5 min. on your site and I would love to do a deeper dive if you would like some more tips. - Justin S.
  3. Recently Completed Website, I would love to hear thoughts. 

    https://www.blnkslatemedia.com/

    screencapture-blnkslatemedia-2020-06-17-15_38_40.png

  4. How to add a pricing list to a squarespace site. (*please note this also has the media breaks for mobile and tablet devices included in the css) 

    HTML:

    <div class="snip1404">
        <div class="plan first-plan">
            <header>
            <h4 class="plan-title plan-short-description">
            START </h4>
            <div class="plan-cost">
                <span class="plan-price">$900</span><span class="plan-type">/month</span></span><span class="plan-type"></span>
            
            </div>
            </header>
            <ul class="plan-features">
                <li><span class="icon-checkmark">&#8226;</span> 15 Micro Videos
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Captions
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Thumbnails
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Titles
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Time Stamps
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Custom Branded</li>
            </ul>
            <div class="plan-select">
                <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%201%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
     
                      <br><br><p class="plan-description">
                *All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
              </p>
            </div>
        </div>
        <div class="plan">
            <header>
            <h4 class="plan-title plan-short-description">
            GROW </h4>
            <div class="plan-cost">
                <span class="plan-price">$1,500</span><span class="plan-type">/month</span><span class="plan-type"></span>
            </div>
            </header>
            <ul class="plan-features">
                <li><span class="icon-checkmark">&#8226;</span> 30 Micro Videos
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Captions
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Thumbnails
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Titles
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Time Stamps
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Custom Branded</li>
            </ul>
            <div class="plan-select">
                <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%202%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
    <br><br><p class="plan-description">
                *All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
              </p>
            </div>
        </div>
        <div class="plan three - featured">
            <header>
              
            <h4 class="plan-title plan-short-description">
            EXPAND</h4>
            <div class="plan-cost">
                <center><h4><mark>Most Popular</mark></h4></center><span class="plan-price">$3,600</span><span class="plan-type">/month</span>
             <span class="plan-type"></span>
            </div>
            </header>
            <ul class="plan-features">
                <li><span class="icon-checkmark">&#8226;</span> 90 Micro Videos
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Captions
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Thumbnails
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Titles
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Time Stamps
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Custom Branded</li>
            </ul>
            <div class="plan-select">
                <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%203%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
    <br><br><p class="plan-description">
                *All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
              </p>

            </div>
        </div>
      <div class="plan last-plan">
            <header>
            <h4 class="plan-title plan-short-description">
            SCALE </h4>
            <div class="plan-cost">
                <span class="plan-price">$9,000</span><span class="plan-type">/month</span><span class="plan-type"></span>
            </div>
            </header>
            <ul class="plan-features">
                <li><span class="icon-checkmark">&#8226;</span> 300 Micro Videos
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Captions
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Thumbnails
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Titles
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Time Stamps
    </li>
                <li><span class="icon-checkmark">&#8226;</span> Custom Branded</li>
            </ul>
            <div class="plan-select">
                <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%204%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
    <br><br><p class="plan-description">
                *All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
              </p>
            </div>
        </div>
      
      <div class="clearboth">
        
      </div>
    </div>

    ----------------------------

    CSS:

    mark {
      background-color: #07e8b7;
      color: black;
    }

    .plan-description {
      font-size: 12px;
    }


    .snip1404 {
      font-family: 'barlow-bold', Arial, sans-serif;
      color: #404040;
      text-align: left;
      font-size: 16px;
      width: 100%;
      max-width: 100%;
      margin: 50px 0px;
    }


      .snip1404 .plan-features{
        font-family: 'robo', Arial, sans-serif;}
      

    .sqs-block-code .sqs-block-content :last-child {
        margin-bottom: 0;
        margin: 0px;
    }


    .custom-tchart.snip1404 .plan.tchart {
        width: 45%;
        margin: 2.5%;
    }


    .custom-tchart.snip1404 .plan-features {
      padding-top: 20px;
        border: 5px solid #07e8b7;

    }

    .snip1404 .plan-features {
        padding: 0 0 20px;
        margin: 0;
        list-style: outside none none;
      font-family: 'robo', Arial, sans-serif;
      }

    .custom-tchart.snip1404 .plan {
       
        border: 0px;
        box-shadow: 0;

    }

    .custom-tchart.snip1404 .plan-cost {
      font-family: 'barlow-bold', Arial, sans-serif;  
      padding: 20px 20px 10px;
        text-align: right;
      }

    .custom-tchart .plan-cost{
      color:#07e8b7;
      background-color: white;
      border: 5px solid #07e8b7;
        border-bottom: 0px solid;
      
      
    }

    .custom-tchart li{
      color:black;
        background-color: white;
      
    }

    .custom-tchart li .icon-checkmark{
      color:black
        
    }

    .snip1404 img {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      z-index: -1;
    }


    .snip1404 .plan {  
      margin: 0;
      width: 25%;
      position: relative;
      float: left;
      overflow: hidden;
      border: 10px solid #fff;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
      background-color: #fff;
      /* height:700px; */
      
    }
    .snip1404 .plan.tchart{width:50%}
    .snip1404 .plan:hover i,
    .snip1404 .plan.hover i {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
     
    }
    .snip1404 .first-plan {
      border-radius: 8px 0 0 8px;
    }
    .snip1404 .last-plan {
      border-radius: 0 8px 8px 0;
    }
    .snip1404 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.25s ease-out;
      transition: all 0.25s ease-out;
    }
    .snip1404 header {
      background-color: #07e8b7;
      color: #404040;
    }
    .snip1404 .plan-title {
      background-color: rgba(0, 0, 0, 0.5);
      position: relative;
      margin: 0;
      padding: 20px 20px 0;
      text-transform: uppercase;
      letter-spacing: 4px;
    }
    .snip1404 .plan-title:after {
      position: absolute;
      content: '';
      top: 100%;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 40px 300px 0 0;
      border-color: rgba(0, 0, 0, 0.5) transparent transparent;
    }
    .plan-short-description{
        color:#fff;
    }
    .snip1404 .plan-cost {
      padding: 40px 20px 10px;
      text-align: right;
    }


    .snip1404 .plan-price {
      font-weight: 600;
      font-size: 3em;
    }
    .snip1404 .plan-type {
      opacity: 0.8;
      font-size: 0.7em;
      text-transform: uppercase;
    }
    .snip1404 .plan-features {
      padding: 0 0 20px;
      margin: 0;
      margin-top: 20px;
      list-style: outside none none;
    }
    .snip1404 .plan-features li {
      padding: 6px 10%;
    }
    .snip1404 .plan-features i {
      margin-right: 8px;
      
      color: rgba(0, 0, 0, 0.5);
    }
    .snip1404 .plan-select {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding: 20px;
      text-align: center;
    }
    .snip1404 .plan-select a {
      background-color: #07e8b7;
      color: #404040;
      text-decoration: none;
      padding: 12px 20px;
      font-size: 0.75em;
      font-weight: bold;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 4px;
      display: inline-block;
    }
    .snip1404 .plan-select a:hover {
      background-color: #05725C;
      color:#fff;
    }
    .snip1404 .featured {
      margin-top: -10px;
      border-color: #8FE0EB;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
      z-index: 1;
      border-radius: 8px;
    }
    .snip1404 .featured .plan-select {
      padding: 30px 20px;
    }
    @media only screen and (max-width: 767px) {
      .snip1404 .plan {
        width: 50%;
      }
      .snip1404 .plan-title,
      .snip1404 .plan-select a {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      .snip1404 .plan-select,
      .snip1404 .featured .plan-select {
        padding: 20px;
      }
      .snip1404 .featured {
        margin-top: 0;
      }
    }

    @media only screen and (max-width: 440px){
        .custom-tchart.snip1404 .plan.tchart{
            width:100%;
        }    
    }
    @media only screen and (max-width: 440px) {
      .snip1404 .plan {
        width: 100%;
      }
    }

    ----------------------------

  5. Hey @tuanphan I was wondering if you know how to target one navigation item so the one navigation item can be orange and the rest stay the same color. I have found this and it doesnt work. I am also using folders so that might be why. Thank you for your help. 

    This code does nothing...

    .Header-nav-item:nth-child(4) {
       color: #ec8349 !important;
      }

     

    This code works but it makes too many items orange

     

    .header-nav-wrapper a:last-child{
        color: orange !important;
    }
     

     

    1. tuanphan

      tuanphan

      Hi,

      You can tag me on your post or send to my email. https://beaverhero.com/covid19/

      I will check at the end of day.

  6. Hello Tuanphan, 

    I see that you are very active on here and have a question about something that you are on the feed but not hitting exactly what I am looking for. Please see the attached screen shot for reference. I am using 7.1 dont have the site built yet but this is from the old site the client has and I want to make sure that it will be able to work on 7.1 or I will end up using the old template they already have. Thank you in advance for your help with this issue. 

    - Justin Seimits

    Screen Shot 2020-03-19 at 10.10.17 AM.png

    1. tuanphan

      tuanphan

      Hi,

      You mean secondary navigation or?

      If secondary navigation, SS 7.1 doesn't support. There are two way to do this

      1. Use announcement bar, insert text link, then use CSS to move annoucement bar to under header

      >> I did for a site. See here

      2. Add text links to Footer then use jQuery append to move them to under header.

      --

      Also, the next time you can send via forum message / email, because sent in profile, sometimes I do not receive notifications.

  7. Want to change the size of the logo on desktop but not on mobile? 

     

    @media only screen and (min-width: 1200px){
      


    .header-title-logo img {
      max-height: 1500px !important;
      width: auto !important;
      height: 150px !important;
     
    }

    }

    @media only screen and (min-width: 634px) {
      .design-layout-poster .image-card-wrapper {
        visibility: visible;
        opacity: 1;
        font-size: 32px;
        transition-duration:;
        background-color: ;
      }
      
    }

    @media only screen and (min-width: 434px) {
    .header-title-nav-wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex: 1 0 67%;
        align-items: center;
    }
    }
    @media only screen and (min-width: 800px){
    .header-title-nav-wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex: 1 0 67%;
        align-items: center;
        position: relative;
        left: 100px;
      }}

×
×
  • 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.