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

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


Brand322

Question

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 post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Can you share link to page in screenshot? We can check easier.

Posted Images

4 answers to this question

Recommended Posts

  • 0

Hi! Yes its a website to a colleague if mine: www.mattvesely.com

Im also trying to keep it responsive to stay as 3 columns on smaller screens (except phones). 

Edited by Brand322
Link to post
  • 0

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

Edited by Brand322
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...