Maximum CSS coding reached

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?

 

I am pretty sure you can use this trick to add more css via a .css file.

Not the easiest to edit that way though. I would recommend putting the css that you already finished in a file, and use the editor to add more than you are working on.

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 !