Change where the picture headline is displayed on mobile?

Site URL: https://michaelkablitz.de/en/portfolio

PW: hallo123

My portfolio looks like I want it on desktop but on mobile the headline is sometimes below and sometimes above the picture. I want to make it look the same for every of those pictures.

Is there a CSS code for that?

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.

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

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

@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!

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

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
 

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

On 4/18/2022 at 2:54 AM, tuanphan said:

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

 

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

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

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