Jump to content

Responsive design for multiple blocks

Recommended Posts

Posted (edited)

Hello! I am hoping to make this entire section responsive as seen in my attached image below. I have tried making certain elements relative and others absolute, and using % values to hopefully make everything proportionate, but I have had no luck 😕 I also want all my text to be responsive and remain in the specific layout/lines as show in the image. I tried combining either media query or CLAMP with absolute positioning, but again it didn't work... I also want the scrolling block marquee to be responsive. The scrolling block is a part of the next section (white colored background), and I used margin-top: -10% to shift is upwards so that it overlaps with the top blue section. But again, it's not responsive when I resize the screen, it doesn't stay in the same place right in between the both sections 😞

Thank you so much in advance!!! 😄

 

 

Screenshot 2024-06-08 at 1.43.30 PM.png

Edited by designedbycarolyn
added extra issue
Link to comment
  • Replies 5
  • Views 162
  • Created
  • Last Reply

Top Posters In This Topic

11 hours ago, designedbycarolyn said:

Hello! I am hoping to make this entire section responsive as seen in my attached image below. I have tried making certain elements relative and others absolute, and using % values to hopefully make everything proportionate, but I have had no luck 😕 I also want all my text to be responsive and remain in the specific layout/lines as show in the image. I tried combining either media query or CLAMP with absolute positioning, but again it didn't work... I also want the scrolling block marquee to be responsive. The scrolling block is a part of the next section (white colored background), and I used margin-top: -10% to shift is upwards so that it overlaps with the top blue section. But again, it's not responsive when I resize the screen, it doesn't stay in the same place right in between the both sections 😞

Thank you so much in advance!!! 😄

 

 

Screenshot 2024-06-08 at 1.43.30 PM.png

Can you share your url so I can check it?

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
14 hours ago, designedbycarolyn said:

Oh sorry! I thought I attached it, but here's the link! 🙂

https://www.designedbycarolyn.co/about

We can use the following code to set style for mobile and desktop view

/*style on mobile*/
@media only screen and (max-width: 767px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

/*style on desktop*/
@media only screen and (min-width: 768px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

Do you have any sample/design for the layout on mobile so I can understand and give the right code

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 6/9/2024 at 11:59 PM, Beyondspace said:

We can use the following code to set style for mobile and desktop view

/*style on mobile*/
@media only screen and (max-width: 767px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

/*style on desktop*/
@media only screen and (min-width: 768px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

Do you have any sample/design for the layout on mobile so I can understand and give the right code

Thank you so much! I have added 2 photos below for how I would like it to look like on mobile. The scrolling block marquee would ideally sit in between the two sections 🙂 Thank you so so much again!

Screenshot 2024-06-11 at 11.51.43 AM.png

Screenshot 2024-06-11 at 11.51.55 AM.png

Link to comment
On 6/9/2024 at 11:59 PM, Beyondspace said:

We can use the following code to set style for mobile and desktop view

/*style on mobile*/
@media only screen and (max-width: 767px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

/*style on desktop*/
@media only screen and (min-width: 768px) {
  section[data-section-id="66632a385b33d12961bc3d27"] {

  }
}

Do you have any sample/design for the layout on mobile so I can understand and give the right code

hello @Beyondspace! apologies for the inconvenience but may I ask how would I be able to make everything responsive? 🙂 I already know how to use media queries but I'm not sure if I'm supposed to use positioning or flex display (or perhaps other ways) to make it responsive 😕 I have also attached an image for my desired mobile layout with my previous reply, desktop layout is attached in the original post. thank you so much!!

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.