Блог

Главная - Вопросы по программированию - Когда телефонное устройство находится в ландшафтном режиме, css начинает портиться

Когда телефонное устройство находится в ландшафтном режиме, css начинает портиться

#html #css

Вопрос:

В настоящее время я создаю этот веб-сайт для компании в качестве студента-стажера, и мне было интересно, как я мог бы исправить эту проблему, когда мои контейнеры для продуктов и рекламные контейнеры при переворачивании или на телефоне меньшего размера не исправляются, а текст и / или кнопки находятся вне контейнера. Как я могу это исправить? Я понимаю запросы мультимедиа, но у меня нет полного представления о том, как я могу исправить это с помощью css.

HTML (Продукты)

 <?php
            require_once 'includes/dbh-inc.php';
            $current_file_name = basename($_SERVER['PHP_SELF']);
            $result2 = mysqli_query($conn,"SELECT `serviceID` FROM `addService` WHERE servicePageName = '".$current_file_name."'");
            $row2 = mysqli_fetch_array($result2);
            $ID2 = $row2['serviceID'];
            
            $sql = "SELECT * FROM addProduct WHERE serviceID = '$ID2'";
            $result = $conn-> query($sql);
            
            if ($result-> num_rows > 0) {
                while ($row = $result-> fetch_assoc()) {
                    echo '<div class="product-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['imagetmp']).')">';
                    echo '<div class="service-title">';
                    echo '<h1>'. $row["product"] .'</h1>';
                    echo '</div>';
                    echo '</div>';
                }
                echo '</div>';
                echo '</div>';
            }
            ?>

CSS (Продукты)

 /* Services Section */

.services-section {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    justify-content: center;
    
}

.services-section a {
    
}

.services-section h1 {
    color: var(--clr-text);
    font-size: 3.5rem;
    text-decoration: underline;
    
}

.services-section h2 {
    color: var(--clr-text);
    font-size: 2.5rem;
    text-decoration: underline;
    
}

.title-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

.services {
    display: grid;
    gap: 10px;
    margin-top: 1em;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    justify-items: center;
}

.service-title {
    display: flex;
    justify-content: center;
    background-color: var(--clr-background);
    border: var(--clr-bg-border);
    align-items: center;
    flex-direction: column;
    height: fixed;
    width: fixed;
}

.service-container {
    border: 5px solid var(--clr-primary);
    background-size: cover;
    background-position: center;
    background-color: black;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30vh;
    margin-bottom: 5vh;
}

.service-container i {
    color: white;
    padding: 0.5em;
    float: right;
}

.service-container h1 {
    color: var(--clr-text);
    padding: 0.5em;
    font-size: 1.5rem;
}

.service-container h2 {
    color: var(--clr-text);
    padding: 0.5em;
    font-size: 1.5rem;
}

.service-container h1:hover {
    color: var(--clr-secondary-text);
    transition: ease 650ms;
}

.service-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
}

.service-button a {
    background-color: var(--clr-primary);
    color: var(--clr-text);
    text-decoration: none;
    font-size: 2em;
    padding: 0.5em;
    
}

.service-button a:hover {
    color: black;
    background-color: yellow;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
    transition: ease 650ms;
}

.service-about {
    display: flex;
    justify-content: center;
    background-color: var(--clr-background);
    border: var(--clr-bg-border);
    padding: 1em;
    margin: 1em;
    height: fixed;
    width: fixed;
}

.service-about p {
    color: var(--clr-text);
    text-align: center;
    font-size: 1.5rem;
}

.service-about span {
    color: var(--clr-secondary-text);
    text-align: center;
    font-size: 1.5rem;
}

.service-about a {
    color: var(--clr-secondary-text);
    text-align: center;
    font-size: 1.5rem;
}

.featured-services {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    justify-items: center;
}

HTML (Promotion)

 <div class="promotions">
    <?php
        
        require_once 'includes/dbh-inc.php';
        $sql = "SELECT clientName, startDate, endDate FROM Clients";
        $result = $conn-> query($sql);
        $currentDate = date('Y-m-d');
        $currentDate = date('Y-m-d', strtotime($currentDate));
        $promotion;
        if ($result-> num_rows > 0) {
            while ($row = $result-> fetch_assoc()) {
                if (($currentDate >= $row["startDate"]) amp;amp; ($currentDate <= $row["endDate"])){
                    echo '<div class="promotion-container">';
                    echo '<div class="promotion-text">';
                    echo '<h1> '. $row["clientName"] .' is currently having a promotion.</h1>';
                    echo '</div>';
                    echo '<div class="promotion-button">';
                    echo '<button>Click Here</button>';
                    echo '</div>';
                    echo '</div>';
                    
                    
                }
                
            }
        }
    ?>

</div>

CSS (Продвижение)

 
/* PROMOTION PAGE */

.promotions {
    min-height: 100vh;
    display: grid;
    color: var(--clr-text);
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    text-align: center;
    justify-items: center;
    margin-top: 1em;
}

.promotion-container {
    border: 5px solid var(--clr-primary);
    height: 20vh;
    width: 30vh;
    background-color: black;
}

.promotion-text h1 {
    font-size: 1.15rem;
    padding: 1em;
}

.promotion-button {
    display: flex;
    justify-content: center;
    padding: 1em;
}

.promotion-button button {
    color: var(--clr-text);
    background-color: var(--clr-primary);
    font-size: 1.15rem;
}

Изображение моей текущей проблемы

Фотография моей проблемы

Изображение проблемы с кнопкой

Комментарии:

1. Для такого типа вопросов вы должны публиковать только визуализированные HTML и CSS (в функционирующем фрагменте). Решения будут заключаться в тех, которые вы затем сможете перевести в свой исходный код.

Ответ №1:

Есть как минимум два варианта:

  1. Вы можете настроить свои стили, используя преимущества flexbox или сетки.
  2. Вы можете написать несколько стилей для ландшафтной ориентации:

    @media (ориентация: ландшафт) { // ваши конкретные стили для ландшафта }

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Метки: ,