Need to change place logo before picture in mobile view

Site URL: https://www.conceicaoespada.com

Hi everyone,

Been playing around with CSS a bit to try and have my logo show before the main picture in the landing page of the website I've been working on: 

On mobile, the picture goes on top of the logo, and I'd like it to be the other way around. I was trying to play with flex properties, but couldn't figure it quite right.

The order in mobile should be:

• Logo
• Picture
• Text
• Button
• Text
• Button

Any help with be appreciated!

On 4/12/2022 at 8:35 PM, Stressmanagement said:

Site URL: https://www.conceicaoespada.com

Hi everyone,

Been playing around with CSS a bit to try and have my logo show before the main picture in the landing page of the website I've been working on: 

On mobile, the picture goes on top of the logo, and I'd like it to be the other way around. I was trying to play with flex properties, but couldn't figure it quite right.

The order in mobile should be:

• Logo
• Picture
• Text
• Button
• Text
• Button

Any help with be appreciated!

I think we can achieve it by adding one more image block below the logo.

After that, adding some CSS code to hide the new image on desktop view and hide the one image on mobile view

Hope that it makes sense

Hi @bangank36

Thanks for your answer. I tried doing as you suggested, but the picture still appeared on top of the logo in the mobile view...

On 4/19/2022 at 6:02 PM, Stressmanagement said:

Thanks for your answer. I tried doing as you suggested, but the picture still appeared on top of the logo in the mobile view...

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-78b5b525592267f52a22:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/61f4167d275b8f5ef44d5016/8bf9fc51-83e2-484d-9741-050e927f5eed/CE_NOVOlogo_04.png?format=750w);
    width: 100%;
    height: 350px;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1649427987231_8133 {
    display: none;
}}

On 4/22/2022 at 4:17 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-78b5b525592267f52a22:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/61f4167d275b8f5ef44d5016/8bf9fc51-83e2-484d-9741-050e927f5eed/CE_NOVOlogo_04.png?format=750w);
    width: 100%;
    height: 350px;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1649427987231_8133 {
    display: none;
}}

 

Thanks a lot @tuanphan that worked!