Jump to content

Need to change place logo before picture in mobile view

Recommended Posts

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: 

image.thumb.png.a8825ea8fa020c69e88b68e7a4a45749.png

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!

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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: 

image.thumb.png.a8825ea8fa020c69e88b68e7a4a45749.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

 

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
  • 2 weeks later...
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!

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.