Jump to content

Change where the picture headline is displayed on mobile?

Recommended Posts

Video 3. On mobile, you place video (left) - text (right) so on mobile it will stack left to right, and it will be video (top) - text (bottom).

If you want them stack title (top) - video (bottom), you will need to use custom code. If you want to continue, I will check & give the code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 3/3/2021 at 10:27 PM, Zeigerful said:

Yes that would be perfect. I would like to have them stacked like you said with title on top and video on bottom for all of them.

Thank you

Add to Design > Custom CSS

/* video - title */
@media screen and (max-width:767px) {
div#page-section-602bd34764681006f65b3029>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
div#page-section-602bd35d19a0c259faa758fa>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 9 months later...
On 12/9/2021 at 10:32 AM, CMJM said:

@tuanphan

 

What would be the coding for image? (i/o video)

Having the "Image Title" side-by-side with image in desktop but on top of image on mobile? Thanks!

Can you share link to page where you have problem? I think each case needs a different code, we can check site url easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 months later...
On 3/7/2021 at 4:02 AM, tuanphan said:

Add to Design > Custom CSS

/* video - title */
@media screen and (max-width:767px) {
div#page-section-602bd34764681006f65b3029>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
div#page-section-602bd35d19a0c259faa758fa>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Dear @tuanphan

Could you please help me as well with this problem?
I would like to have always the headline first in my project detailpages on mobile.

https://shayech.squarespace.com/
PW: SF2022

Thank you!!!
Sibylle
 

Link to comment
On 4/11/2022 at 10:08 PM, orneverornow said:

Dear @tuanphan

Could you please help me as well with this problem?
I would like to have always the headline first in my project detailpages on mobile.

https://shayech.squarespace.com/
PW: SF2022

Thank you!!!
Sibylle
 

You mean on this page? https://shayech.squarespace.com/projekte/kilchberg-sunset-house

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 4/18/2022 at 2:54 AM, tuanphan said:

Hi @tuanphan

I figured out how to change it. Thank you anyways!
I am still struggling with the following two issues:

- Logo on the subpages is too bright, I would love to upload a darker version and keep the bright one only on the homepage
- Projects in mobile are not loading immediately, only when scrolling - so the page is completely empty in the beginning

Would be amazing if you could help me with that.

Thank you!
Sibylle

Link to comment
On 4/20/2022 at 4:58 PM, orneverornow said:

Hi @tuanphan

I figured out how to change it. Thank you anyways!
I am still struggling with the following two issues:

- Logo on the subpages is too bright, I would love to upload a darker version and keep the bright one only on the homepage
- Projects in mobile are not loading immediately, only when scrolling - so the page is completely empty in the beginning

Would be amazing if you could help me with that.

Thank you!
Sibylle

#1. Add this to Design > Custom CSS. Replace Pixabay with new logo image url

/* Project detail page logo */
body.collection-621f8065bb3c817f730b2adb.view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129__480.jpg);
}

#2. 

@media screen and (max-width:767px) {
body.collection-621f8065bb3c817f730b2adb.view-item .preSlide {
	opacity:1 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 4/23/2022 at 9:41 AM, tuanphan said:

#1. Add this to Design > Custom CSS. Replace Pixabay with new logo image url

/* Project detail page logo */
body.collection-621f8065bb3c817f730b2adb.view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129__480.jpg);
}

#2. 

@media screen and (max-width:767px) {
body.collection-621f8065bb3c817f730b2adb.view-item .preSlide {
	opacity:1 !important;
}
}

 

Thank you very much!! @tuanphan

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.