Вопрос Изменение расположения redage v3

[krava]

Вот код снизу отвечающий за дизайн информации квестов. Есть такой вопрос голову ломаю уже долго, что тут нужно изменить что бы его переместить к правой стороне экрана почти в притык и спустить почти к центру





.hudevo__quests
display: flex
flex-direction: column
align-items: flex-start
.hudevo__quest
display: flex
flex-direction: column
align-items: flex-start
@Include fluid("margin-bottom", 10)
.box-flex
align-items: center
.hudevo__quest_circle
@Include fluid("width", 20)
@Include fluid("height", 20)
border-radius: 50%
display: flex
align-items: center
justify-content: center
@Include fluid("border", 2, "solid rgba(255, 255, 255, 0.25)")
@Include fluid("margin-right", 8)
.questcircle
@Include fluid("height", 10)
@Include fluid("width", 10)
border-radius: 50%
background: #F82847
&.purple
background: #9b7ae3
.hudevo__quest_title
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45)
font-weight: 600
@Include fluid("font-size", 15)
@Include fluid("line-height", 14)
.hudevo__quest_square
background: #67FF4F
@Include fluid("width", 5)
@Include fluid("height", 5)
@Include fluid("margin-right", 5)
.hudevo__quest_subtitle
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45)
font-weight: 400
@Include fluid("font-size", 13)
@Include fluid("line-height", 14)
@Include fluid("max-width", 197)
.hudevo__quest_button
@Include fluid("min-width", 24)
@Include fluid("min-height", 24)
@Include fluid("padding-left", 5)
@Include fluid("padding-right", 5)
@Include fluid("padding-bottom", 3)
@Include fluid("padding-top", 3)
display: flex
align-items: center
justify-content: center
font-weight: 600
@Include fluid("font-size", 14)
@Include fluid("line-height", 17)
background: #F82847
&.purple
background: #9b7ae3
.hudevo__quest_info
@Include fluid("min-width", 24)
@Include fluid("min-height", 24)
background: white
color: #252525
@Include fluid("margin-left", 3)
@Include fluid("padding-left", 5)
@Include fluid("padding-right", 5)
@Include fluid("padding-bottom", 3)
@Include fluid("padding-top", 3)
display: flex
align-items: center
justify-content: center
font-weight: 400
@Include fluid("font-size", 13)
@Include fluid("line-height", 15)

 

[Jerry (ChatGPT)]

Чтобы переместить информацию квестов к правой стороне экрана почти вплотную и спустить ее почти к центру, вы можете внести следующие изменения в ваш CSS:

1. В блоке .hudevo__quests добавьте свойство justify-content: flex-end; чтобы выровнять информацию квестов по правому краю экрана.

2. Для центрирования по вертикали вы можете добавить свойство align-items: center; в блок .hudevo__quests.

3. Чтобы сдвинуть информацию квестов ближе к центру по вертикали, вы можете поэкспериментировать с добавлением отрицательного значения к свойству margin-top в блоке .hudevo__quests.

Примерно так:

CSS:

.hudevo__quests
    display: flex
    flex-direction: column
    align-items: center
    justify-content: flex-end
    margin-top: -50px; /* Измените значение на ваше усмотрение */