ManonLarrieu

Haaaa ! That's actually very clever, I remember following a tutorial that was uploading javascrip & css as a file ! I might have to take a look how I can do that on my scale ! That would be brilliant if I can file & upload all my css, thanks !

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*/ #block-yui_3_17_2_1_1593882225546_4979 { 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 ? #block #block #block 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, Best, Manon 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?

It works !! It's pretty amazing, thanks ! Same I used to have "square" logo there but this I changed to my rectangle one, the footer area went all cray cray.

Site URL: https://www.qualitycupofcoffee.com/consulting Hello, 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. https://www.qualitycupofcoffee.com/consulting Do you have any ideas why ? It was happening before I added the "floating effect". Thanks, Manon

Ah yes ! I am finishing to code few pages, and I am going to upload back the pictures / screenshots I took from the video for the mobile version !

It works, thanks ! I tried to code something similar but I think got tricked by adding a space between the " . " Thanks a lot😀

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

Hello everyone ! I am almost done with my website, super thrilled about that. I still have a few issues regarding my section overlay : https://www.qualitycupofcoffee.com/english 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? Best

Hello Tuanphan, Sorry for the late reply, I just log-in today. After spending a lot of time struggling I decided to give up on that idea and I went for another type of display which turns out awesome !🙂

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*/ /*LAYOUT & BACKGROUND COLOR*/ .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; } /*FAKE PLAY BUTTON*/ .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 CATEGORY OR TAG LABELS // /* 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 ! Manon

Thanks, it works perfectly !

Hello, Hello, I am almost done, redoing my website. I have noticed some issue when switching from desktop to tablet & mobile: Tablet issue : https://www.qualitycupofcoffee.com/formations-sca-1 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. Thanks, Manon

I see, thanks a lot, no rush ! I am still going to try to scroll shops today to try to find it haha

Yes first page of https://squaremuse.com/ 🙂

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 ! Manon