Blog summary block stack on tablet

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!

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?

Yes, the Latest News summary block.

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%;
}
}

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!

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!

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

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

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!

5. (Tablet – Homepage) Align center content?

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

6. (Tablet – Menu) Increase text width?

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

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: 

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

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

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

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

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)