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


  • Content Count

  • Joined

  • Last visited

Posts posted by ManonLarrieu

  1. Site URL: https://www.qualitycupofcoffee.com

    Hello everyone !

    Hope you had a fine week so far. I have been postponing on creating my blog area and I finally decided to get it done. I have two minor coding issue so far:

    1. Image card
    As you can see at the bottom of my blog template page, I am trying to create 2 images card that will refer to my newest and oldest post.
    - I would love to get the title and subtitle white, however I am unable to make the change appear.
    - I want my text alignment to match my picture. For the left image card I wish to have my text aligned on the left and for the right one, aligned on the right.
    - I would like to have a pink gradient line that appear under the image card title. ( just like here : www.qualitycupofcoffee.com/blog-eng ) I am not sure what to write in      my coding to make it happens.

    /*image card for blog*/
    .image-title-wrapper {
      text-align: match !important;
      color: white !important;
      background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #f5ad9e 65%);

    2. Archive block
    I coded something to have pink bullet point on my website, however I am not quite sure why it also affects my archive block list. Any idea? See the dropdown menu called "categorie" on the top of the page. www.qualitycupofcoffee.com/blog-eng

    Let me know 🙂


  2. Site URL: http://www.qualitycupofcoffee.com/english

    Hello everyone !

    Hope everyone had a great weekend. Stressing Sunday evening for me, trying to finish up my website. My website is available in English & French ( www.qualitycupofcoffee.com ). The english version in my primary navigation and the french one in the secondary navigation. I did not use a translation plugin as both sites are offering different services & courses depending on the local & international market.

    Short story long, I did a LOT of custom CSS DYI and I to do it x2 most of the time. Last night, I got a warning message telling me I reached the maximum CSS coding capacity. I was wondering if there is a way to code that could target several #block using the same animation effect for instance :

    The floating effect :
     I insert this code ONCE 


    //*Floating effect image*//
    @keyframes floating {
        from { transform: translate(0,  0px); }
        65%  { transform: translate(0, 15px); }
        to   { transform: translate(0, -0px); }    

    and then each time I target my block image I imput the following code ...

    /*footer float image*/
        animation-name: floating;
        animation-duration: 4.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-left: 30px;
        margin-top: 5px;
    @media only screen and (max-width: 640px) {
      #block-yui_3_17_2_1_1593882225546_4979 {
       display: none;

    ... and I have repeated this over and over. Is there a way I could target ALL my block using the same effect and then add the effect ?


    It might sound like a stupid question but I've never sit down & properly learnt coding. Last night made me realize that MAYBE I could lighten up a bit in terms of coding and it would be good for my website overall. I have repeated a lot of similar code to target different sections each time. It would be really helpful if I can remove some of my CSS lines as I am looking to create few more pages or do some new DIY coding tweak for my upcoming blog & newsletter. 

    Let me know what you think,

    PS: That could also be a reason why my top banners take a little of time to load despite having a fall back image, same issue on cellphone. I can see a "blank" section still showing instead of loading my fall back image. Too heavy on the CSS?


  3. Site URL: https://www.qualitycupofcoffee.com/consulting


    Adding the final touch of my website, I am facing an issue with my footer. I added an image in my footer (which is my logo). When I am editing it, everything seems fine however when I visit the page the width of the image drastically change making it unable to see the full image. 


    Do you have any ideas why ? It was happening before I added the "floating effect".


  4. Oh my god ! I didn't spot that side problem on mobile. It's probably due to my button position, I just have to bring it back to the middle of the box and it should be fixed.

    -> I removed the "grey color" which makes it confusing so you can see what problem I am trying to "hide". You see my white background colour is not appearing at the bottom. It's like it can't go above the pink colour ... 

    Screen Shot 2020-07-11 at 14.39.54.png

  5. Hello everyone !
    I am almost done with my website, super thrilled about that. I still have a few issues regarding my section overlay :
    It concerns the 2nd Overlay "Consulting" for the consulting box. I created a "page" for my text box that I tried to overlay on the previous section. It works fine for the top of the box (white background) however the background colour of my page is hidden under the background colour of the next section (pink).

    I really want to have the full section in white. I am struggling to make the half bottom of the box come above the next section. In the meantime I coloured the text in grey to create that visual separation effect but that's not what I want ... 

    Any thoughts?

  6. Site URL: http://www.qualitycupofcoffee.com/french

    Hello everyone !

    I am having a hard time coding stuffs.  I trying to align the metadata (tags & categories) of my summary block on the same line as my blog title :

    - I created a summary blog for my course calendar ( id=floatsection ) that overlay on my previous banner. I am trying to align my metadata tags (date) & category (price) with my  title (course name). I would like to display everything on the same line as follows : (secondary metadata) tags - Title - Primary metadata category. However I cannot bring up the tags & categories. How can I do that ?

    Here is my code so far :


    /*Dates des formations box Overlay*/
    #floatsection {
    width: 30%;
      position: absolute;
      min-height: initial!important;
      z-index: 30;
      left: 80%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%,-50%);
      .Index-page-content {
        padding: 0em 0em;
      & + section {
        padding-top: 90px;
    /*Fake summary podcast*/
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) {
      background: #f5ad9e;
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(even) {
      background: #fffce9;
    .sqs-gallery-design-list .sqs-gallery-meta-container {
      padding: 20px;
    .sqs-gallery-design-list {
      max-width: 600px;
      margin: 0 auto;
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container,
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
      margin: 10px;
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      display: flex;
      align-items: center;
    .sqs-gallery-design-list .sqs-gallery-image-container {
      padding-right: 0;
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
    .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
      content: 'PLAY';
      font-weight: bold;
      color: #fff;
      font-size: 14px !important;
      border: 1px solid #fff;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      height: 33px;
      line-height: 2.2em;
      pointer-events: none;
    /* Position the category right-corner */
    .sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats,{
        display: block;
     position: absolute;
        right: -10%;
      transform: translate(-50%, -50%);
     padding: 10px;
      height: 33px;
      line-height: 2.2em;
      pointer-events: none;
     transform: translate(-50%, -50%);
     padding: 10px;
      height: 33px;
      line-height: 2.2em;
      pointer-events: none;
    /* Position tag in left corner */
    .sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags{
        position: absolute;
        left: 10%;
    .sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats a, {
      /* default category labels are White on Magenta */
      font-size: 12pt; /* Size of category text */
      padding: 4px 9px; /* Size of category label */
      color: rgba(18, 17, 17, 0.66); /* default category font colour */
    .sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags a {
      /* default category labels are White on Magenta */
      font-size: 12pt; /* Size of category text */
      padding: 4px 9px; /* Size of category label */
      color: rgba(18, 17, 17, 0.66);/* default category font colour */
    .sqs-block-summary-v2 .summary-title a:link {
      color: rgba(18, 17, 17, 0.66); /* color of title */
      font-size: 15px !important;
    weight: 400;
    font-family: freight-medium;

    2/ I am trying to disable the link of my secondary metadata tags but my code is not working. I used the following code :

    /* disable blog links on summary block titles for Date Box*/
    #floatsection .summary-item-has-tags-link {
    pointer-events: none !important;

     I am really struggling to move an element around, I have spent several hours trying to fix it but it's a total mess.
    Thanks in advance !


  7. Hello, Hello,

    I am almost done, redoing my website. I have noticed some issue when switching from desktop to tablet & mobile:

    Tablet issue :
    On that page my price boxes (pink square ones) does not seem to resize well on tablet, same goes for the green coffee courses cards below. On tablet, the typo is going all over the place. Any idea?

    Mobile issue:
    I realized that for my coffee courses cards, my title typo font is changing from desktop to mobile, not sure why. I got the same typo font change issue on the first page of my website (the testimonial area). My font is switching from Freight Big pro to ... I don't know what.



  8. Hello everyone,

    Hope everyone is enjoying the holidays. I am using that week to reshape my website. I have found & bought a lot of custom designs already. While shopping, I spotted this feature on several websites ( e.g Squaremuse.com ) : On desktop, when the mouse hoover the title, it unveils a box. I am just obsess with it, I can't find any shop selling it. Does someone have an idea where I could buy that custom CSS ? I already went through Squaremuse shop without success …

    Thanks !

    Screen Shot 2019-12-27 at 15.57.07.png

    Screen Shot 2019-12-27 at 15.57.14.png

  9. @tuanphan Oh my ... ! Thanks a lot, it works perfectly ! I can't believe I spent hours trying to figure out/find the code.

    Have a great Sunday, you rock  👊

    PS: Also agree, the gold color for desktop color is not an option. I prefer the focus to be on the drawing/images ! I am gonna monitor the website performance to see if those dark colours still works on visitors /  clicking behaviours.


    Screen Shot 2019-11-03 at 11.57.28.png

  10. Hello Everyone !

    I am reaching out because I am a bit stuck on some little coding tweak. I already went through the forum but the answers I found do not really work. Here is my issue:

    I have the pro version of Squarespace which allow me coding. I have a website (Brine template) with an english/french version and on both version I created a event calendar page. In order to have my logo color to pop-out and keep up with my branding / visual identity, I added a green background to that calendar page.

    Desktop / Tablet version:
    It's looking good as a small image is displayed on the day I m running a class/event.

    Mobile version:
    There is no image displayed, fair enough, however with that green color, I cannot really see the days there is an event. 

    My idea is to: When there  is an event schedule I want to change the color of the square from that weird light green color to a gold color, numbers would be in white.
    So on the mobile version, an event would be displayed like that The entire square would be gold & the date displayed in white. What code shall I insert ? Shall I insert it in the advance option custom css of my page?

    Here are some pictures of the calendar on the desktop & mobile. 
    Here is the link to my website www.qualitycupofcoffee.com 
    PS: Don't mind, I have been working on it on the last few days, the videos banners seems to be loading slower than usual. I still need to have a look at it. 

    Many thanks !




  • Create New...