Но проблема в том, что теперь, если я сожму окно браузера до ширины менее 550 пикселей. содержимое страницы просто выходит за пределы окна, что не идеально.
Поскольку макет и расположение всего на странице важны, я хотел бы сделать так, чтобы, когда ширина устройства меньше ширины страницы (550 пикселей), вся страница и ее содержимое масштабировались, чтобы соответствовать этой ширине, без изменения положения или относительных размеров контента.
Вот как выглядит сайт:
/>воссоздание веб-сайта sega.com
вот что он делает, когда его размер становится меньше его ширины:
веб-сайт sega.com выходит за границы браузера
вот примерное то, что я хочу, чтобы веб-сайт делал (сделано с помощью Ctrl + -):
веб-сайт sega.com уменьшен в маленьком окне браузера.
и вот код, весь CSS находится в html-файл:
Код: Выделить всё
Welcome to Sega Online
body {
height: 100%;
background-color: #000000;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: auto;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
width: 550px;
}
.toprow {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
Want to get in on the greatest video game promotion ever?[/b][b]
[img]/sega/img/spotlight.gif[/img]
A low-cost, easy-to-use alternative to access the World Wide Web using your Sega Saturn![/b]
[img]/sega/img/buzz.gif[/img]
[img]/sega/img/centernew.gif[/img]
[img]/sega/img/games.gif[/img]
[img]/sega/img/central.gif[/img]
[img]/sega/img/recroom.gif[/img]
Я попробовал много разных методов и решений, и многие из них не сработали или не дали того эффекта, который я искал. Я также искал в Интернете, чтобы узнать, есть ли у кого-нибудь то же самое, но безуспешно.
В основном я пытался использовать гибкие поля для хранения содержимого страницы, но все всегда оставалось постоянной ширины.
P.S. У меня 0 профессионального опыта программирования, поэтому, возможно, я что-то пропустил или сделал неправильно. Не стесняйтесь предлагать лучшие способы структурирования моего кода.
Подробнее здесь: https://stackoverflow.com/questions/796 ... e-width-of
