Jump to content

Making Two Images into Main Header/Banner

Recommended Posts

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

Hello! And thanks in advance for any help. This might sound a little bit complicated but I hope it is understandable.

I am looking to have two images in one header banner for my home page that way when switched to mobile view each image with its button and text will stack on top of each other. On the uploaded images, you will see what I mean and how I would like them to be. Also, I saw a couple of websites like Mejuri and PDpaola that have this so those would be great examples (they have two images full width next to each other on desktop view and those two images stacked on top of each other on mobile view). I will also add photos of what I mean.

Thanks in advance for any help, hope someone can help me with this.

sale.png

Reminder With Phone Quote Instagram Story (1).png

Link to comment
1 hour ago, Giselle2000 said:

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

Hello! And thanks in advance for any help. This might sound a little bit complicated but I hope it is understandable.

I am looking to have two images in one header banner for my home page that way when switched to mobile view each image with its button and text will stack on top of each other. On the uploaded images, you will see what I mean and how I would like them to be. Also, I saw a couple of websites like Mejuri and PDpaola that have this so those would be great examples (they have two images full width next to each other on desktop view and those two images stacked on top of each other on mobile view). I will also add photos of what I mean.

Thanks in advance for any help, hope someone can help me with this.

sale.png

Reminder With Phone Quote Instagram Story (1).png

This custom css will help make the section side by side, but it will have some issue with the parallax background

@media only screen and (max-width: 600px) {
      #about-intro {
        width: 50%;
        float: left;
      }
}

image.thumb.png.aac25f487dff7ca07b1b33d5848af4ba.png

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

Thank you! I will try that. Not sure if that would allow me to have two different images next to each other though. I was thinking about maybe making a gallery with two images full width somehow with coding but then I thought about the button, I would still like a button in each image (similar to how you can add a button to a banner with no problem). Any help will be appreciated, thanks!!!

Link to comment
Just now, Giselle2000 said:

Thank you! I will try that. Not sure if that would allow me to have two different images next to each other though. I was thinking about maybe making a gallery with two images full width somehow with coding but then I thought about the button, I would still like a button in each image (similar to how you can add a button to a banner with no problem). Any help will be appreciated, thanks!!!

You can try to disable parallax it will display background image correctly

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

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.