Highlighted Text Spacing Issue on Mobile

I've used code to add a highlight behind some of my text, but the spacing of the highlight gets messed up when the line breaks on mobile. The code I'm using in the custom css section is:

.medium-green-highlight {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(200, 226, 223, 1) 42%);
  padding: 0.7rem 1.5rem;
}

I'm then adding a code block to my pages where I want to add the highlight.

I've attached photos to show how it looks on desktop (all one line) and on mobile (broken into two lines). The only solution that I've come up with is to break the text on desktop also. I'd rather keep the text all on one line on desktop, but I can't figure out how to extend the highlight where the line breaks on mobile. Any help would be greatly appreciated!

The specific page I'm working on is https://heron-crow-84yj.squarespace.com/workshops/norway2023-week1 and the password is 7rHL331g

The text is being pushed to 2 lines due to its large h2 size on mobile. This code will give you a media query for mobile that will decrease the h2 font size to 1 .1rem making it stay in a single line. Just add this to this pages advanced code section.

@media screen and (max-width: 767px) and (orientation: portrait){
h2 {
    font-size: 1.1rem;
}

}

Sorry. Thats the correct code here.

Thanks for the code, @adifederico! I'd actually like the text to remain large and on multiple lines for mobile. The text becomes way too small to keep it all on one line for mobile. So that's the issue I'm having—I don't know how to just extend the highlight and center the text for the line break on mobile.

17 minutes ago, autpops said:

Thanks for the code, @adifederico! I'd actually like the text to remain large and on multiple lines for mobile. The text becomes way too small to keep it all on one line for mobile. So that's the issue I'm having—I don't know how to just extend the highlight and center the text for the line break on mobile.

Yeah, It does size things down a bit. 

27 minutes ago, adifederico said:

Yeah, It does size things down a bit. 

Yeah. I'm assuming there's some white-space code that can work here, but I'm not super familiar with that. I can add the line break manually for mobile and then just hide it for desktop, but that doesn't fix the spacing issue unfortunately.

Hey, @tuanphan! Any suggestions for this?

On 11/4/2022 at 4:27 PM, autpops said:

Yeah. I'm assuming there's some white-space code that can work here, but I'm not super familiar with that. I can add the line break manually for mobile and then just hide it for desktop, but that doesn't fix the spacing issue unfortunately.

On 11/4/2022 at 3:56 PM, adifederico said:

Yeah, It does size things down a bit. 

I am thinking that on desktop single text block can be used with the highlight but on mobile for things to center correctly you will need to use 2 text blocks to achieve the centering issue. So you could set media queries to hide and show what you want between the 2. So the code would look something like this:

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1666117108985_4482240{
        display: none;
    }

    placeholder mobile 1{
        display: block;
    }

     placeholder mobile 2{
        display: block;
    }
}

@media only screen and (min-width: 768px) {

    #block-yui_3_17_2_1_1666117108985_4482240{
        display: block;
    }
     placeholder mobile 1{
        display: none;
    }

    placeholder mobile 2{
        display: none;
    }
}

NOTE: the placeholder mobile #'s will need to be replaced with the new text blocks id's for this to work. Hope this steers you in the correct direction.

23 hours ago, adifederico said:

 

I am thinking that on desktop single text block can be used with the highlight but on mobile for things to center correctly you will need to use 2 text blocks to achieve the centering issue. So you could set media queries to hide and show what you want between the 2. So the code would look something like this:

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1666117108985_4482240{
        display: none;
    }

    placeholder mobile 1{
        display: block;
    }

     placeholder mobile 2{
        display: block;
    }
}

@media only screen and (min-width: 768px) {

    #block-yui_3_17_2_1_1666117108985_4482240{
        display: block;
    }
     placeholder mobile 1{
        display: none;
    }

    placeholder mobile 2{
        display: none;
    }
}

 

NOTE: the placeholder mobile #'s will need to be replaced with the new text blocks id's for this to work. Hope this steers you in the correct direction.

Yeah, I think you're right. This is probably the way to go. Thanks so much for your help and input! I really appreciate it.