Responsive design for multiple blocks

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!!! 😄

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!!! 😄

 

 

Can you share your url so I can check it?

9 hours ago, Beyondspace said:

Can you share your url so I can check it?

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

https://www.designedbycarolyn.co/about

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

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!

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!!

@tuanphan hello! apologies for mentioning you in this thread but just wondering if this is something that you would be able to help with? 🙂

On 6/16/2024 at 11:21 PM, designedbycarolyn said:

@tuanphan hello! apologies for mentioning you in this thread but just wondering if this is something that you would be able to help with? 🙂

You mean make mobile like this? I see mobile layout already same as your image

18 hours ago, tuanphan said:

You mean make mobile like this? I see mobile layout already same as your image

Both responsive on desktop and mobile T.T 
I am struggling to make it responsive on desktop view (both the section and the scrolling block marquee), as well as mobile version scrolling block marquee. Thank you so much!! 🙂