Как выровнять текст внутри UL слева для устройств с шириной между 900px -1024px

Как выровнять текст внутри UL слева для устройств с шириной между 900px -1024px ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Как выровнять текст внутри UL слева для устройств с шириной между 900px -1024px

Цитата

Сообщение Anonymous » 13 июн 2025, 14:50

import React from 'react';
import faqBg from '../assets/faq-bg.png';
import briefcaseIcon from '../assets/briefcase.png';
import missionImage from '../assets/our-mission.png';
import whyChooseUsImage from '../assets/why-choose-us.png';
import tickMark from '../assets/tick-mark.png';
import './About.css'

const About = () => (

{/* Hero Banner */}

{/* About Info */}

About WebInvolve

Empowering Businesses with Next-Generation Digital Solutions

At WebInvolve, we are a passionate team of developers, designers, and digital strategists committed to transforming ideas into impactful digital experiences. Founded with the vision to empower businesses of all sizes, we specialize in delivering cutting-edge web development, mobile applications, e-commerce solutions, UI/UX design, and digital transformation services.
Our mission is simple: build digital products that drive growth, enhance user engagement, and generate measurable results.

Years of
Experience

08+

{/* Mission */}

Custom Development: React, Laravel, Flutter, Node.js solutions.

[*]

E-commerce Experts: Shopify, WordPress, and custom platforms.

[*]

Fast Delivery: Quick, scalable, quality-first builds.

[*]

AI & ML: Smart solutions for automation and insights.

[*]

Full Support: Design, launch, and beyond.

[/list]

);

export default About;

< /code>
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
overflow-x: hidden;
}

.about-wrapper {
width: 100%;
margin: 0;
padding: 0;
}

/* Hero Banner */
.hero-section {
width: 100%;
height: 320px;
background-size: cover;
background-position: center;
}

/* About Info Section */
.about-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 60px 5%;
background: #fff;
min-height: 500px;
margin-bottom: 36px;
gap: 2rem;
}

.about-text {
flex: 1;
max-width: 60%;
}

.about-text h2 {
font-size: 2rem;
margin-bottom: 22px;
}

.about-text h4 {
font-size: 18px;
margin-bottom: 22px;
font-family: auto;
color: #222426;
}

.about-text p {
margin-bottom: 15px;
line-height: 1.6;
color: #383C41;
font-size: 18px;
font-family: sans-serif;
}

.highlight {
background: linear-gradient(to right, #696EDF, #00DEFA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.experience-box {
width: 227px;
height: 227px;
position: relative;
flex-shrink: 0;
}

.experience-card {
width: 100%;
height: 100%;
background: #7E86F5;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}

.years {
font-size: 29px;
line-height: 1.2;
margin-bottom: 3rem;
margin-right: 43px;
}

.briefcase-img {
height: 64px;
width: 64px;
margin-right: 92px;
}

.experience-years {
position: absolute;
bottom: -100px;
right: -113px;
width: 227px;
height: 227px;
background: #00A9C9;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 76px;
font-weight: bold;
}

/* Mission Section */
.mission-section {
display: flex;
align-items: center;
padding: 60px 5%;
background: #F7F9FC;
gap: 3rem;
}

.mission-image {
width: 452px;
height: 412px;
object-fit: cover;
border-radius: 12px;
flex-shrink: 0;
}

.mission-text {
flex: 1;
}

.mission-text h3 {
font-size: 1.8rem;
margin-bottom: 16px;
}

.mission-text p {
line-height: 1.6;
color: #383C41;
font-size: 18px;
font-family: sans-serif;
}

/* Why Choose Us Section */
.choose-us-section {
display: flex;
align-items: center;
padding: 60px 5%;
background-color: #f5faff;
gap: 3rem;
}

.choose-us-text {
flex: 1;
}

.choose-us-text h1 {
font-size: 2rem;
margin-bottom: 20px;
}

.why {
color: black;
}

.gradient-text {
background: linear-gradient(to right, #696EDF, #00DEFA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.choose-us-text ul {
list-style: none;
padding: 0;
}

.choose-us-text li {
font-size: 18px;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
color: #383C41;
}

.tick-icon {
display: inline-flex;
align-items: center;
margin-right: 10px;
flex-shrink: 0;
}

.tick-img {
width: 20px;
height: 20px;
}

.choose-us-text strong {
color: #1e3a8a;
}

.choose-us-image {
flex-shrink: 0;
}

.choose-us-img {
width: 452px;
height: 412px;
object-fit: cover;
border-radius: 12px;
}

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
.hero-section {
height: 280px;
}

.about-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.about-text {
max-width: 100%;
margin-bottom: 3rem;
}

.experience-box {
margin-bottom: 5rem;
}

.years {
font-size: 26px;
margin-bottom: 2.5rem;
margin-right: 35px;
}

.briefcase-img {
height: 56px;
width: 56px;
margin-right: 75px;
}

.experience-years {
width: 200px;
height: 200px;
font-size: 68px;
bottom: -90px;
right: -100px;
}

.mission-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.mission-image {
width: 100%;
max-width: 450px;
height: auto;
margin-bottom: 2rem;
}

.choose-us-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.choose-us-text {
margin-bottom: 2rem;
}

.choose-us-text li {
text-align: left;
justify-content: flex-start;
}

.choose-us-img {
width: 100%;
max-width: 450px;
height: auto;
}
}

/* Mobile Styles (480px - 768px) */
@media (max-width: 768px) {
.hero-section {
height: 240px;
}

.about-section {
padding: 40px 4%;
margin-bottom: 24px;
}

.about-text h2 {
font-size: 1.8rem;
}

.about-text h4 {
font-size: 16px;
}

.about-text p {
font-size: 16px;
}

.experience-box {
width: 200px;
height: 200px;
margin-bottom: 4rem;
}

.years {
font-size: 24px;
margin-bottom: 2rem;
margin-right: 28px;
}

.briefcase-img {
height: 48px;
width: 48px;
margin-right: 60px;
}

.experience-years {
width: 180px;
height: 180px;
font-size: 60px;
bottom: -80px;
right: -80px;
}

.mission-section {
padding: 40px 4%;
}

.mission-text h3 {
font-size: 1.6rem;
}

.mission-text p {
font-size: 16px;
}

.choose-us-section {
padding: 40px 4%;
}

.choose-us-text h1 {
font-size: 1.8rem;
}

.choose-us-text li {
font-size: 16px;
}

.tick-img {
width: 18px;
height: 18px;
}
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
.hero-section {
height: 180px;
}

.about-section {
padding: 30px 3%;
margin-bottom: 20px;
}

.about-text h2 {
font-size: 1.5rem;
margin-bottom: 16px;
}

.about-text h4 {
font-size: 14px;
margin-bottom: 16px;
}

.about-text p {
font-size: 14px;
margin-bottom: 12px;
}

.experience-box {
width: 180px;
height: 180px;
margin-bottom: 4rem;
}

.years {
font-size: 20px;
margin-bottom: 1.5rem;
margin-right: 20px;
}

.briefcase-img {
height: 40px;
width: 40px;
margin-right: 45px;
}

.experience-years {
width: 160px;
height: 160px;
font-size: 48px;
bottom: -70px;
right: -70px;
}

.mission-section {
padding: 30px 3%;
}

.mission-text h3 {
font-size: 1.4rem;
margin-bottom: 12px;
}

.mission-text p {
font-size: 14px;
}

.choose-us-section {
padding: 30px 3%;
}

.choose-us-text h1 {
font-size: 1.5rem;
margin-bottom: 16px;
}

.choose-us-text li {
font-size: 14px;
margin-bottom: 12px;
}

.tick-img {
width: 16px;
height: 16px;
}
}

/* Large Desktop Styles (min-width: 1400px) */
@media (min-width: 1400px) {
.about-section {
padding: 80px 8%;
}

.mission-section {
padding: 80px 8%;
}

.choose-us-section {
padding: 80px 8%;
}
}

/* Extra Large Desktop Styles (min-width: 1800px) */
@media (min-width: 1800px) {
.about-section {
padding: 100px 12%;
}

.mission-section {
padding: 100px 12%;
}

.choose-us-section {
padding: 100px 12%;
}
}

@media (min-width: 1024px) {
.experience-box {
margin-right: 92px;
}
}

.choose-us-text {
font-family: sans-serif;
}

/* Trying to keep the text aligned with image in desktop view and images centered till 1024px */

.mission-section {
align-items: flex-start;
}

@media (max-width: 1024px) {
.mission-section {
align-items: center;
}
}

.choose-us-section {
align-items: flex-start;
}

@media (max-width: 1024px) {
.choose-us-section {
align-items: center;
}
}

/* End */
< /code>
Can I make the text inside why choose us section, move to the left in the same horizontal position as the section above it, (At WebInvolve, our mission

). I Tried using align-items: center it worked for the mission-section but not the why choose us section, from what I can make out it's due to the use of . For devices having width in between 900px and 1024px

Подробнее здесь: https://stackoverflow.com/questions/796 ... ween-900px

1749815411

Anonymous

import React from 'react';
import faqBg from '../assets/faq-bg.png';
import briefcaseIcon from '../assets/briefcase.png';
import missionImage from '../assets/our-mission.png';
import whyChooseUsImage from '../assets/why-choose-us.png';
import tickMark from '../assets/tick-mark.png';
import './About.css'

const About = () => (

{/* Hero Banner */}


{/* About Info */}


About WebInvolve
[h4]Empowering Businesses with Next-Generation Digital Solutions[/h4]

At WebInvolve, we are a passionate team of developers, designers, and digital strategists committed to transforming ideas into impactful digital experiences. Founded with the vision to empower businesses of all sizes, we specialize in delivering cutting-edge web development, mobile applications, e-commerce solutions, UI/UX design, and digital transformation services.
Our mission is simple: build digital products that drive growth, enhance user engagement, and generate measurable results.


Years of
Experience
[img]{briefcaseIcon} alt=[/img]

08+



{/* Mission */}

[img]{missionImage}
className="mission-image"
/>

Our Mission

At WebInvolve, our mission is to empower businesses with innovative, high-performance digital solutions that accelerate growth and deliver real-world impact. We are dedicated to building custom websites, mobile apps, and digital platforms that are not only beautifully designed but also strategically optimized for user engagement, speed, and scalability.
We aim to bridge the gap between technology and business goals by providing reliable, future-proof solutions that drive measurable results.  Through creativity, collaboration, and cutting-edge technologies, WebInvolve strives to be the digital partner of choice for startups, enterprises, and organizations looking to lead in the digital age.



{/* Why Choose Us */}


Why Choose Us
[list]
[*]

[img]{tickMark} alt=[/img]


[b]Custom Development:[/b] React, Laravel, Flutter, Node.js solutions.


[*]

[img]{tickMark} alt=[/img]


[b]E-commerce Experts:[/b] Shopify, WordPress, and custom platforms.


[*]

[img]{tickMark} alt=[/img]


[b]Fast Delivery:[/b] Quick, scalable, quality-first builds.


[*]

[img]{tickMark} alt=[/img]


[b]AI & ML:[/b] Smart solutions for automation and insights.


[*]

[img]{tickMark} alt=[/img]


[b]Full Support:[/b] Design, launch, and beyond.


[/list]

[img]{whyChooseUsImage} alt=[/img]



);

export default About;

< /code>
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
overflow-x: hidden;
}

.about-wrapper {
width: 100%;
margin: 0;
padding: 0;
}

/* Hero Banner */
.hero-section {
width: 100%;
height: 320px;
background-size: cover;
background-position: center;
}

/* About Info Section */
.about-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 60px 5%;
background: #fff;
min-height: 500px;
margin-bottom: 36px;
gap: 2rem;
}

.about-text {
flex: 1;
max-width: 60%;
}

.about-text h2 {
font-size: 2rem;
margin-bottom: 22px;
}

.about-text h4 {
font-size: 18px;
margin-bottom: 22px;
font-family: auto;
color: #222426;
}

.about-text p {
margin-bottom: 15px;
line-height: 1.6;
color: #383C41;
font-size: 18px;
font-family: sans-serif;
}

.highlight {
background: linear-gradient(to right, #696EDF, #00DEFA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.experience-box {
width: 227px;
height: 227px;
position: relative;
flex-shrink: 0;
}

.experience-card {
width: 100%;
height: 100%;
background: #7E86F5;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}

.years {
font-size: 29px;
line-height: 1.2;
margin-bottom: 3rem;
margin-right: 43px;
}

.briefcase-img {
height: 64px;
width: 64px;
margin-right: 92px;
}

.experience-years {
position: absolute;
bottom: -100px;
right: -113px;
width: 227px;
height: 227px;
background: #00A9C9;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 76px;
font-weight: bold;
}

/* Mission Section */
.mission-section {
display: flex;
align-items: center;
padding: 60px 5%;
background: #F7F9FC;
gap: 3rem;
}

.mission-image {
width: 452px;
height: 412px;
object-fit: cover;
border-radius: 12px;
flex-shrink: 0;
}

.mission-text {
flex: 1;
}

.mission-text h3 {
font-size: 1.8rem;
margin-bottom: 16px;
}

.mission-text p {
line-height: 1.6;
color: #383C41;
font-size: 18px;
font-family: sans-serif;
}

/* Why Choose Us Section */
.choose-us-section {
display: flex;
align-items: center;
padding: 60px 5%;
background-color: #f5faff;
gap: 3rem;
}

.choose-us-text {
flex: 1;
}

.choose-us-text h1 {
font-size: 2rem;
margin-bottom: 20px;
}

.why {
color: black;
}

.gradient-text {
background: linear-gradient(to right, #696EDF, #00DEFA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.choose-us-text ul {
list-style: none;
padding: 0;
}

.choose-us-text li {
font-size: 18px;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
color: #383C41;
}

.tick-icon {
display: inline-flex;
align-items: center;
margin-right: 10px;
flex-shrink: 0;
}

.tick-img {
width: 20px;
height: 20px;
}

.choose-us-text strong {
color: #1e3a8a;
}

.choose-us-image {
flex-shrink: 0;
}

.choose-us-img {
width: 452px;
height: 412px;
object-fit: cover;
border-radius: 12px;
}

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
.hero-section {
height: 280px;
}

.about-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.about-text {
max-width: 100%;
margin-bottom: 3rem;
}

.experience-box {
margin-bottom: 5rem;
}

.years {
font-size: 26px;
margin-bottom: 2.5rem;
margin-right:  35px;
}

.briefcase-img {
height: 56px;
width: 56px;
margin-right: 75px;
}

.experience-years {
width: 200px;
height: 200px;
font-size: 68px;
bottom: -90px;
right: -100px;
}

.mission-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.mission-image {
width: 100%;
max-width: 450px;
height: auto;
margin-bottom: 2rem;
}

.choose-us-section {
flex-direction: column;
text-align: center;
padding: 50px 5%;
}

.choose-us-text {
margin-bottom: 2rem;
}

.choose-us-text li {
text-align: left;
justify-content: flex-start;
}

.choose-us-img {
width: 100%;
max-width: 450px;
height: auto;
}
}

/* Mobile Styles (480px - 768px) */
@media (max-width: 768px) {
.hero-section {
height: 240px;
}

.about-section {
padding: 40px 4%;
margin-bottom: 24px;
}

.about-text h2 {
font-size: 1.8rem;
}

.about-text h4 {
font-size: 16px;
}

.about-text p {
font-size: 16px;
}

.experience-box {
width: 200px;
height: 200px;
margin-bottom: 4rem;
}

.years {
font-size: 24px;
margin-bottom: 2rem;
margin-right: 28px;
}

.briefcase-img {
height: 48px;
width: 48px;
margin-right: 60px;
}

.experience-years {
width: 180px;
height: 180px;
font-size: 60px;
bottom: -80px;
right: -80px;
}

.mission-section {
padding: 40px 4%;
}

.mission-text h3 {
font-size: 1.6rem;
}

.mission-text p {
font-size: 16px;
}

.choose-us-section {
padding: 40px 4%;
}

.choose-us-text h1 {
font-size: 1.8rem;
}

.choose-us-text li {
font-size: 16px;
}

.tick-img {
width: 18px;
height: 18px;
}
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
.hero-section {
height: 180px;
}

.about-section {
padding: 30px 3%;
margin-bottom: 20px;
}

.about-text h2 {
font-size: 1.5rem;
margin-bottom: 16px;
}

.about-text h4 {
font-size: 14px;
margin-bottom: 16px;
}

.about-text p {
font-size: 14px;
margin-bottom: 12px;
}

.experience-box {
width: 180px;
height: 180px;
margin-bottom: 4rem;
}

.years {
font-size: 20px;
margin-bottom: 1.5rem;
margin-right: 20px;
}

.briefcase-img {
height: 40px;
width: 40px;
margin-right: 45px;
}

.experience-years {
width: 160px;
height: 160px;
font-size: 48px;
bottom: -70px;
right: -70px;
}

.mission-section {
padding: 30px 3%;
}

.mission-text h3 {
font-size: 1.4rem;
margin-bottom: 12px;
}

.mission-text p {
font-size: 14px;
}

.choose-us-section {
padding: 30px 3%;
}

.choose-us-text h1 {
font-size: 1.5rem;
margin-bottom: 16px;
}

.choose-us-text li {
font-size: 14px;
margin-bottom: 12px;
}

.tick-img {
width: 16px;
height: 16px;
}
}

/* Large Desktop Styles (min-width: 1400px) */
@media (min-width: 1400px) {
.about-section {
padding: 80px 8%;
}

.mission-section {
padding: 80px 8%;
}

.choose-us-section {
padding: 80px 8%;
}
}

/* Extra Large Desktop Styles (min-width: 1800px) */
@media (min-width: 1800px) {
.about-section {
padding: 100px 12%;
}

.mission-section {
padding: 100px 12%;
}

.choose-us-section {
padding: 100px 12%;
}
}

@media (min-width: 1024px) {
.experience-box {
margin-right: 92px;
}
}

.choose-us-text {
font-family:  sans-serif;
}

/* Trying to keep the text aligned with image in desktop view and images centered till 1024px */

.mission-section {
align-items: flex-start;
}

@media (max-width: 1024px) {
.mission-section {
align-items: center;
}
}

.choose-us-section {
align-items: flex-start;
}

@media (max-width: 1024px) {
.choose-us-section {
align-items: center;
}
}

/* End */
< /code>
Can I make the text inside why choose us section, move to the left in the same horizontal position as the section above it, (At WebInvolve, our mission
[img]https://i.sstatic.net/9QHN3A9K.png[/img]
). I Tried using align-items: center it worked for the mission-section but not the why choose us section, from what I can make out it's due to the use of . For devices having width in between 900px and 1024px 

Подробнее здесь: [url]https://stackoverflow.com/questions/79664796/how-to-align-text-inside-ul-to-the-left-for-devices-having-width-between-900px[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Почему мой гамбургер ведут себя неожиданно при изменении размера ниже 900px? [закрыто]

Последнее сообщение Anonymous « 28 апр 2025, 19:54
Добавлено в форуме Html

Anonymous » 28 апр 2025, 19:54 » в форуме Html

Я создаю адаптивный веб -сайт и пытаюсь внедрить меню гамбургера, которое активирует, когда ширина просмотра составляет менее 900px. Тем не менее, меню, кажется, освежает или ведет себя непредсказуемо при изменении размера окна вокруг этой точки...

0 Ответы

9 Просмотры

Последнее сообщение Anonymous
28 апр 2025, 19:54
Почему мой гамбургер ведут себя неожиданно при изменении размера ниже 900px? [закрыто]

Последнее сообщение Anonymous « 28 апр 2025, 19:54
Добавлено в форуме CSS

Anonymous » 28 апр 2025, 19:54 » в форуме CSS

Я создаю адаптивный веб -сайт и пытаюсь внедрить меню гамбургера, которое активирует, когда ширина просмотра составляет менее 900px. Тем не менее, меню, кажется, освежает или ведет себя непредсказуемо при изменении размера окна вокруг этой точки...

0 Ответы

8 Просмотры

Последнее сообщение Anonymous
28 апр 2025, 19:54
Выровнять текст Unicode слева и справа на одной строке в HTML

Последнее сообщение Anonymous « 18 окт 2023, 17:54
Добавлено в форуме CSS

Anonymous » 18 окт 2023, 17:54 » в форуме CSS

Как выровнять часть текста слева, а другой текст справа от той же строки?

Я попробовал некоторые решения для текста, не поддерживающего Юникод, отсюда. Но для текста в Юникоде две части текста не выровнены по вертикали:

foo foo？

фу фу？

0 Ответы

56 Просмотры

Последнее сообщение Anonymous
18 окт 2023, 17:54
Если элемент сетки шириной 0 пикселей содержит элемент шириной 0 пикселей с левым полем больше 0 пикселей, он переполняе

Последнее сообщение Гость « 08 дек 2023, 14:27
Добавлено в форуме CSS

Гость » 08 дек 2023, 14:27 » в форуме CSS

Если элемент сетки имеет ширину 0 пикселей содержит элемент шириной 0 пикселей со значением свойства CSS margin-left больше 0 и размещается на дорожке столбца сетки, размер которой равен «авто». затем он переполняет контейнер сетки в браузере...

0 Ответы

156 Просмотры

Последнее сообщение Гость
08 дек 2023, 14:27
Если элемент сетки шириной 0 пикселей содержит элемент шириной 0 пикселей с левым полем больше 0 пикселей, он переполняе

Последнее сообщение Гость « 08 дек 2023, 14:27
Добавлено в форуме CSS

Гость » 08 дек 2023, 14:27 » в форуме CSS

Если элемент сетки имеет ширину 0 пикселей содержит элемент шириной 0 пикселей со значением свойства CSS margin-left больше 0 и размещается на дорожке столбца сетки, размер которой равен «авто». затем он переполняет контейнер сетки в браузере...

0 Ответы

129 Просмотры

Последнее сообщение Гость
08 дек 2023, 14:27

Вернуться в «CSS»