Huge Photos when turning the smartphone

Site URL: https://grape-lobster-f2ye.squarespace.com/

Hi there

I am almost happy with our new company website. But there is a big problem that I cannot solve myself. It affects the menu item "Team" in the mobile view. Only 1 photo per row is shown here. So far so good ... The problem is when I turn the smartphone 90 degrees: Then still only 1 photo per line is displayed and it is huge! This doesn't look good. How can that be changed? 2 photos next to each other would be perfect.

Thanks for helping!
Roger

any idea??

Add to Design > Custom CSS

/* Team page mobile */
@media screen and (max-width:767px) and (orientation:landscape) {
div#page-section-6086779cb155640b4c33d9ae .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6086779cb155640b4c33d9ae .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Perfect! Thank you very much

On 7/13/2021 at 10:31 PM, RogerH said:

Perfect! Thank you very much

Hi. Do you need to help these?

(checked: July 20)

Site URL: https://grape-lobster-f2ye.squarespace.com/

1. (Mobile – Homepage) Background image don’t show in full size

2. (Tablet – Footer) Word break. Want to increase text width?

3. (Tablet – Homepage) Want to increase text width?

4. (Tablet – Team) The same here

https://grape-lobster-f2ye.squarespace.com/team

5. (Tablet – brenn und treibstoffe) The same here

https://grape-lobster-f2ye.squarespace.com/brenn-und-treibstoffe

6. (Tablet – tankstellen) The same here

https://grape-lobster-f2ye.squarespace.com/tankstellen

7. (Tablet – tankservices) The same here

https://grape-lobster-f2ye.squarespace.com/tankservices

8. (Tablet- geschichte) The same here

https://grape-lobster-f2ye.squarespace.com/geschichte

9. (Tablet – kontakt) The same here

https://grape-lobster-f2ye.squarespace.com/kontakt

yes please! What is to do?

On 7/26/2021 at 1:39 PM, RogerH said:

yes please! What is to do?

Q1,2.3 Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* resize top banner */
[data-section-id="608682af36c10f0a0e5e1fad"] {
    min-height: unset !important;
    height: 70vh;
}
}
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* homepage content */
[data-section-id="60866025b155640b4c32b4d2"] {
.span-1 {
    width: 5%;
}
.content {
    width: 100% !important;
    display: block !important;
    justify-content: center !important;
}
.content-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.span-4 {
    width: 30% !important;
}
.span-7 {
    width: 60%;
}
}
/* footer text */
div#block-yui_3_17_2_1_1619594528116_22857 * {
    white-space: nowrap;
}
}

Great job, Tuanphan, thanks!

On 8/2/2021 at 1:11 PM, RogerH said:

Great job, Tuanphan, thanks!

Q4--> 9. Use this CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* q4 team page */
div#page-section-6086779cb155640b4c33d9ae .span-3 {
    width: 50%;
    float: left !important;
}
div#page-section-6086779cb155640b4c33d9ae .span-3:nth-child(2n+1) {
    clear: left;
}
/* q5 increase text width */
div#page-section-6087cf75eafc7a1f16233435 .span-4 .span-3 {
    width: 100%;
}
/* tankservices */
div#page-section-6087d6842dfc4970bba6e508 .span-4 .span-3 {
    width: 100%;
}
/* geschichte page */
div#page-section-6087cde20f735b520dad8f65 .span-4 .span-3 {
    width: 100%;
}
/* kontakt */
div#page-section-60c7446ad5222928e4d10a38 .span-4 .span-3 {
    width: 100%;
}
}