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

Blog summary block stack on tablet


mnewell

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0
On 6/29/2021 at 6:27 AM, mnewell said:

Site URL: https://perch-puma-kdgl.squarespace.com/

Hello! How can you change the summary block to stack images (blog post images and titles) as 2 images side by side on tablets? Right now it stacks one on top of the other and the images are very wide. And I want it to stack one of top of the other for mobile.

Site: https://perch-puma-kdgl.squarespace.com/

PW: Lightning2021!

Thanks!

Hi. You mean Latest News summary block?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/12/2021 at 11:34 AM, mnewell said:

Yes, the Latest News summary block.

Add to Design > Custom CSS

/* tablet latest news */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1621973450410_10834 .summary-item-list {
    display: flex;
    height: auto !important;
    width: 100% !important;
}
div#block-yui_3_17_2_1_1621973450410_10834 .summary-item-list .summary-item {
    width: 45% !important;
    height: auto !important;
    position: relative !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
}
div#block-yui_3_17_2_1_1621973450410_10834 .summary-item-list .summary-item:nth-child(2n+1) {
    margin-right: 10%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/12/2021 at 11:34 AM, mnewell said:

Yes, the Latest News summary block.

Do you need to help with these?

Site URL – https://perch-puma-kdgl.squarespace.com/?passswor=Lightning2021!

1. (Desktop – Footer) Text break.

https://perch-puma-kdgl.squarespace.com/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-01-min.p

2. (All devices – About) The link put in text News is https://perch-puma-kdgl.squarespace.com/about/news and it does not exist.

https://perch-puma-kdgl.squarespace.com/about/employment/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-02-min.p

3. (Mobile – Footer) Make telephone and fax in different lines?

https://perch-puma-kdgl.squarespace.com/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-03-min.p

4. (Mobile – Tuition) On desktop, can see the entire image. On mobile, the image is partially cropped.

https://perch-puma-kdgl.squarespace.com/admissions/tuition/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-04-min.p

5. (Tablet – Homepage) Align center content?

https://perch-puma-kdgl.squarespace.com/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-05-min.p

6. (Tablet – Menu) Increase text width?

https://perch-puma-kdgl.squarespace.com/?passswor=Lightning2021!

perch-puma-kdgl.squarespace.com-06-min.p

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

Hi tuanphan,

Thanks for following up with some of these. Here is my feedback:

1. Text break – yes, would love help with this.

2. News link – thank you for pointing that out. That is fixed.

3. Phone and fax in footer – yes, I would like to have those on two different lines for mobile.

4. Mobile Tuition page – is there a way to fix the crop? https://perch-puma-kdgl.squarespace.com/admissions/tuition/?passswor=Lightning2021!

5. Tablet for "Latest News" section – I entered the code you listed above (previous response) to stack it differently for tablet. This is what happened for mobile: 

1934657659_ScreenShot2021-08-03at2_42_52PM.thumb.png.65073d95f5028621acafdc94f855aee1.png

 

This is the preferred layout for tablet (two posts side by side):

1121009986_ScreenShot2021-08-03at2_42_34PM.thumb.png.78902def36f14c392e19ac4b916866f8.png

 

And the preferred layout for mobile (one post per line):

153100215_ScreenShot2021-08-03at3_10_29PM.thumb.png.73f2da8d7fc976365c3128f625b1b47d.png

 

Would you be able to help with that? I would like the same tablet and mobile response for the News section as well: https://perch-puma-kdgl.squarespace.com/news

 

Thank you!

Megan

 

Edited by mnewell
Edit: deleted extra, unneeded screenshot.
Link to comment
  • 0
15 hours ago, mnewell said:

Hi @tuanphan. Checking in to see if you're able to help me with these topics. Thank you!

Hi,

#1. How about increasing footer width?

#3. Add to Design > Custom CSS

/* Footer fax on mobile */
@media screen and (max-width:767px) {
footer.Footer [href*="Fax"] {
    display: block;
}
}

#4. Add to Design > Custom CSS

/* Tuition on mobile */
@media screen and (max-width:640px) {
body#collection-60c68483c21ff2642a575fe7 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body#collection-60c68483c21ff2642a575fe7 section[id*="admissions/tuition/intro"] {
    min-height: unset !important;
    height: 200px;
}
}

#5. Sorry, forgot number.

in above code, change this line

Quote
@media screen and (max-width:640px)

to this

Quote

@media screen and (max-width:900px) and (min-width:641px)

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...