Как обрезать стороны сайта для мобильного - PullRequest
Новая
       22

Как обрезать стороны сайта для мобильного

0 голосов
/ 07 февраля 2019

В настоящее время я занимаюсь редизайном своего сайта и хочу, чтобы он был адаптивным как для мобильных, так и для настольных компьютеров.У меня настольная версия выглядит хорошо, но размер текста на vw.Я хочу иметь возможность обрезать края сайта, чтобы его размер больше подходил для мобильных устройств.

Я использую гибкий дисплей и изменяю размер окна в зависимости от размера изображения.Когда размер окна изменяется, все изменяется с ним, что нормально, но я хочу, чтобы оно обрезало боковые стороны после определенного размера окна.Я пытался использовать minimum-width, но изображение не сохраняет свою центральную позицию.

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet">
    <link href="CSS/Photo-styles.css" type="text/css" rel="stylesheet">
    <link href="CSS/topBlock-style.css" typle="text/css" rel="stylesheet">
</head>


<div class = "topBlock">
    <header class = "nameHeader">J O S H &nbsp K O T R O U S</header>
    <p class="navigation"><a class="navigation" href="Photo.html">Photo</a> &nbsp&nbsp <a class="navigation" href="Blog.html">Blog</a>  &nbsp&nbsp <a class="navigation" href="About.html">About</a> &nbsp&nbsp <a class="navigation" href="Contact.html">Contact</a> </p>

</div>


<body class = "container">
    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Landscape.html"><img class = "photoCategory" src="images/streetscape.jpg"/></a>
        <p class = "categoryLabel">L A N D S C A P E </p>


    </div>

    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Portraits.html"><img class = "photoCategory" src="images/emily.jpg"/></a>
        <p class = "categoryLabel">P O R T R A I T S</p>

    </div>


    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Street.html"><img class = "photoCategory" src="images/street.jpg"/></a>
        <p class = "categoryLabel">S T R E E T</p>

    </div>
</body>


.topBlock{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 6.5vw;
    background-color: white;
    top: 0;
    margin: 0 auto;


}

.nameHeader{
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    font-size: 3vw;
    text-align: center;

}

.navigation{
    font-family: 'Quicksand Light', sans-serif;
    font-size: 25px;
    font-size: 1.5vw;
    text-align: center;
    margin-top: -1px;
    text-decoration: none;
    color: black;

}

.navigation:hover{
    transition: 0.25s;
    color: lightgray;
}

.container{
    padding-top: 4%;
    margin: 0;
    background: white;  
}

.photoCategories{
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    background: black;


}

.photoCategory {
    display: block;
    min-width: 800px;
   width: 100%;
    opacity: 0.8;
}

.categoryLabel {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-size: 4vw;
    color: white;

}

.photoCategory:hover{
    transition: 0.5s;
    opacity: 0.6;


}
...