Jump to content

Image and marquee scroll overlap + marquee full width

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 9
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

section#about-susie>div {
    padding-left: 0;
    padding-right: 0;
}
@media screen and (min-width:901px) {
    div#block-yui_3_17_2_1_1687657911292_3269 {
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    z-index: 9999;
}
}

 

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

Thank you so much! I appreciate all your help!
https://www.susiesaltzman.com/about

I have a couple questions: 

  • How do I place the image over the text? Currently, the text is over the image 
  • Is there a way to make the marquee full width where it spans from one end of the screen to another? Right now the site margins are cutting off the text a little early 😅


For mobile

  • I'd like to make the text static and position the paragraph in center alignment with padding on both sides, kinda like this 🙂
  • image.thumb.png.420360f4d6523e2c38e65e27ca4a9d1e.png
Link to comment

Desktop

Remove code I sent & use this new code

section#about-susie>div {
    padding-left: 0;
    padding-right: 0;
}
div#block-yui_3_17_2_1_1687701279148_3882 {
    position: relative;
    z-index: 99999999999;
}
@media screen and (min-width:901px) {
    div#block-yui_3_17_2_1_1687657911292_3269 {
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    z-index: 9999;
padding: 0px !important;
}
}

Mobile

You can add text under image, we can give code to hide it on desktop, I think this is easiest way.

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

I've just added the text under image 🙂

Can you kindly share the code to hide the following: 
- marquee on mobile
- additional text on desktop

Also
- code for setting the paragraph to center alignment and increasing the side margins on mobile view 🙂

- how to set the marquee to full width? 

Screen Shot 2023-06-27 at 11.43.34 PM.png

Edited by ssjewelry
Link to comment
On 6/27/2023 at 11:48 PM, tuanphan said:

It looks like you have a syntax error on CSS box so some (or all) CSS didn't work. You try checking again

If you can't find error, you can paste all code here, we can check easier

Hi @tuanphan! I think I managed to fix the syntax error. 

Although I'm still needing help with the following (as mentioned above)

Can you kindly share the code to hide the following: 
- marquee on mobile
- additional text on desktop

Also
- code for setting the paragraph to center alignment and increasing the side margins on mobile view 🙂
- how to set the marquee to full width? 

Here's the link to the site: https://www.susiesaltzman.com/about


Aside from that, may I also ask how to place the image on top of both sections? 
This one is on this page: https://www.susiesaltzman.com/new-home


image.thumb.png.ae8422b4c476f3cb8472db08c2290d8a.png

Thank you so much and I appreciate all your help!

Link to comment

I see you solved additional text

To hide scroll on mobile, use this CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1687657911292_3269 {
    display: none;
}
section#about-susie .html-block {
    padding-left: 30px;
    padding-right: 30px;
}
}

 

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

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.