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
  • Views 247
  • 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.