Мобильная версияcss: < /p>
Код: Выделить всё
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #F1EFEC;
}
.main-section {
padding: 1.5%;
letter-spacing: .045rem;
}
#navbar li {
color: #030303;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: #030303;
}
/* fit most phones */
@media (max-width: 430px) {
body {
overflow-x: hidden;
}
#navbar {
text-align: center;
background: linear-gradient(#D4C9BE 88%, #F1EFEC);
width: 100%;
}
#navbar li a {
display: none;
}
#navbar header {
font-size: 3rem;
font-weight: 700;
}
.main-section {
font-size: 1.4rem;
font-weight: 500;
}
.main-section header {
font-size: 1.75rem;
font-weight: 600;
margin-top: 10%;
}
pre, code {
white-space: pre-wrap;
}
#footer-links {
display: flex;
justify-content: center;
flex-direction: column;
}
}
< /code>
Как я уже сказал, я исключил, что заголовок является причиной проблемы. Я также попробовал переполнение-х: скрытый; не получил изменений. Установка все на 100% ширину ничего не сделало. Я новичок и утерян. < /P>
[list]
[*]Responsive Web Design
[*][url=#introduction]Introduction[/url]
[*][url=#flexible_images]Flexible Images[/url]
[*][url=#media_queries]Media Queries[/url]
[*][url=#viewport_meta_tag]Viewport Meta Tag[/url]
[*][url=#mobile_first_design]Mobile First Design[/url]
[*][url=#flexbox]Flexbox[/url]
[*][url=#conclusion]Conclusion[/url]
[/list]
Introduction
Responsive Web Design is an approach to web design that aims to make webpages adaptive and flexible. Its aim is to keep all content in good render when changing screen sizes. It does this to ensure readability, usuability, and end-user satisfaction.
Why is it important?
A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Weather they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accesibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.
Flexible Images
One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.
One technique to help images scale correctly is shown below.
.img {
max-width: 100%;
}
Media Queries
Media queries are slectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.
Here is an example of both min and max size being used, but both are not required:
Код: Выделить всё
@media (min-size: 500px) and (max-size: 1000px) {
.class {
color: #ffffff;
width: 50%;
}
}
Viewport Meta Tag
The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting is tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen.
The Viewport Meta tag:
Код: Выделить всё
meta name="viewport" content="width=device-width, initial-scale=1.0"
Mobile First Design
Mobile first design is another principle in responsive web design. As the name entails, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.
Flexbox
Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.
Flex container:
Код: Выделить всё
/* this will create the flexbox */
.container {
display: flex;
}
Код: Выделить всё
/* adjust items horizontally */
.container {
display: flex;
justify-content: space-between;
}
/* adjust items vertically */
.container {
display: flex;
align-items: center;
}
Jump back in:
Подробнее здесь: https://stackoverflow.com/questions/795 ... e-overflow
