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

Huge Photos when turning the smartphone


RogerH

Question

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

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

grape-lobster-f2ye.squarespace.com-01-mi

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

grape-lobster-f2ye.squarespace.com-02-mi

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

grape-lobster-f2ye.squarespace.com-03-mi

4. (Tablet – Team) The same here

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

grape-lobster-f2ye.squarespace.com-04-mi

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

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

grape-lobster-f2ye.squarespace.com-05-mi

6. (Tablet – tankstellen) The same here

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

grape-lobster-f2ye.squarespace.com-06-mi

7. (Tablet – tankservices) The same here

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

grape-lobster-f2ye.squarespace.com-07-mi

8. (Tablet- geschichte) The same here

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

grape-lobster-f2ye.squarespace.com-08-mi

9. (Tablet – kontakt) The same here

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

grape-lobster-f2ye.squarespace.com-09-mi

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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%;
}
}

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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