Slider - Align Text to Left and Change Font

[Quilla (Francesca)]

Hey there! I need some help with a slider for a site. What CSS code is there to align everything to the left or right? The text box and button that is. I should add, I already used the in app customizations, but the problem is that the font then extends across the entire image and I just want it to stay on the left side and not trickle any into the right.

[user3083]

and I need it to look like this

@Helga @Max

[user3083]

This is what it looks like right now → I would like to move the elements up a smidge but not all the way to the top like widget does when I set it that way. Also how can you target the font to change a font I have from Adobe?

[Max]

Hi there, @Quilla

I see that you have 3 Slider widgets. Could you please specify the name of the widget, where you’d like to change the alignment?

[Quilla (Francesca)]

Hey there Max! So embarrassing but I was working on my friend’s Elfsight account and didn’t realize it logged me into hers for some posts! Let me send you a link to the site where the widget I am struggling with is. I would also love to add an Adobe Font Family for the text on that slider. I also posted about the CSS for the arrows on the the youtube gallery LOL .

Leah Waters-Katz

[Quilla (Francesca)]

@Max in an ideal world it would look like this…

[Max]

You’d like to change the alignment only for the second slide, right?

As far as I see, it’s already left aligned and the only difference comparing to your screenshot is the button. Do you want it to be aligned to the right?

[Quilla (Francesca)]

Hey @Max! Sorry for not clarifying! What I mean to say is that I am hoping to shrink the text container down so it only stays to the left and doesn’t extend the length of the widget (this is for the second slide). On the first slide I want to do the same so it is centered, but the container also doesn’t expand the length. For both the first and second slide I am also hoping to move the container up a smidge, unfortunately when I use the presets it goes all the way to the top which isn’t what I was looking for.

Lastly for this widget, I have a font pack from Adobe Fonts I was hoping to change some of the font to. I have both the CSS as well as the portion of code with the attached note (To use these fonts on a web page, copy this code into the tag of your HTML.)

Apologies for all of the questions!

[Max]

Got it, thanks!

Your request is with our devs now. I’ll let you know once I have a response from them

[Max]

@Quilla Here are the solutions from our devs

Limit the width of the text block

[class*="TextBlock__TextHTML-sc"] {
  max-width: 70%;
}

Slightly move the text to the top

[class*="Block__BaseBlock-sc"]:last-child {
  margin-bottom: 30px;
}

Change font of the text block (from top to bottom)

[class*="Block__BaseBlock-sc"]:nth-child(1) * {
  font-family: 'Roboto'
}

[class*="Block__BaseBlock-sc"]:nth-child(2) * {
  font-family: 'Poppins';
}

[class*="Block__BaseBlock-sc"]:nth-child(3) * {
  font-family: 'Poppins';
}

[class*="Block__BaseBlock-sc"]:nth-child(4) * {
  font-family: 'Roboto'
}

[class*="Block__BaseBlock-sc"]:nth-child(5) * {
  font-family: 'Poppins';
}

[class*="Block__BaseBlock-sc"]:nth-child(6) * {
  font-family: 'Roboto'
}

Replace the fonts from the widget to the needed Adobe fonts

Please check it out and let me know if it helped.

[user3083]

Thank you so much!!!