Jump to content

grid-area

Recommended Posts

Posted

Hey
when i add this css code to the custom css - 

.fe-block-yui_3_17_2_1_1691665835354_36577 {

grid-area: 9/6/9/15 ;

}

for some reason i see this in the browser - 

grid-area: .01111111 ;

what can cause this ?

Posted
2 minutes ago, stephan_bazbaz said:

when i add this css code to the custom css

What are you trying to achieve? Can you share your website URL and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

I have on occasion tried to change the grid position (or block size) via this method, but I haven't found a method that works via Custom CSS. 

I was asking the purpose to see if I could help with another way of approaching this change.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 1 month later...
Posted

Is there a way to do this without !important? 

I'm trying to resize certain blocks (to expand horizontally on screen shrinking) by making my div start one col earlier and end one col later for certain screen sizes, but I don't want it to be important for everything. Also, !important is just a real shoddy method and I'm wishing just changing the grid would work
Here's what the code is now in chrome dev tools, and I've tried both just the shorthand and the long way and neither of them will react to 2/3/4/15
(also, I definitely have it selected. it works with important)

    grid-area: 2/4/4/13;
    grid-row-start: 2;
    grid-column-start: 4;
    grid-row-end: 4;
    grid-column-end: 13;

 

Posted

@jdb99 you can try it without important and increase the specificity by adding a collection id. section id and then block id. You also need to put all that grid stuff inside the quotes with the "~" in front of it like this. Since it's a LESS preprocessor what you see on the front end is not always the way it works on the back end.

~"8 / 12 / 12 / 22"

My assumption for your code would be something like this but without having the back end access I can't really test.

grid-area: ~"2/4/4/13";
grid-row-start: ~"2";
grid-column-start: ~"4";
grid-row-end: ~"4";
grid-column-end: ~"13";

I'm not entirely sure you need the escape when you're doing the single numbers long handed but in the short hand version you definitely need it.

If you want to share a link we can maybe help get you the right selectors to avoid the !important thing. I honestly find that I need that a lot with Squarespace considering all the crazy selectors they have setup in their own CSS.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Create an account or sign in to comment

You need to be a member in order to leave a comment

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