Jump to content

Responsive grid like news feed help!!!!!!!

Recommended Posts

Hi there! 

Much help needed, I have been trying for days now to try and learn how to make this (see photo) 

It doesnt need to have the button, I just want three columns of text i can have clickable/linked to the article page. 

And for it to match the width of the grid above it set to have a max-width: 1300px. 

PLEASE HELP!!! 

Thank you all! 

image.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Hi yes I solved, however I have another issue...

- I am trying to get the 'NEWS' feed on the bottom to align with grid in the section above it.

- And have it display as 3 columns (3 x 2) in BOTH desktop and landscape tablet view. 

- And have it display as 1 column (1 x 6) in mobile / cell phone view.

I've tried all the code I could find online. As a CSS amateur, this is getting hard to learn and execute... For some reason when i adjust the width in code it margins the whole section to the left...

 

My Site (temporary address) : https://octopus-guava-k6zs.squarespace.com/

(No password if im not mistaken)

 

Link to Page in Previous Post Screenshot (in case you still need it) : www.mattvesely.com

 

Code ive tried: 

@media screen and (min-width:1024px) {
section[data-section-id="5f5ac93648aa4a4b30bb74a0"]{
  margin-right: 50px !important;
  display: flex !important; 
  justify-content: center !important;
  align-items: center !important;
  width: 84% !important;
}
}

@media screen and (max-width:780px) {
section[data-section-id="5f5ac93648aa4a4b30bb74a0"] {
  width: 100% !important;  
}
}

 

 

PS: Yes I am aware of the Lazy Summaries plug-in, however i only have a personal plan and do not wish to upgrade to a business plan where footer code injection would be possible... (Therefore this is not an option for me)

Desktop View: 

image.thumb.png.20013e2f26b621384dccea0e8b964332.png

 

Tablet Landscape View: 

image.thumb.png.0e3e5c8dfd43be096c099ceddb36a3da.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

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