Как показать мобильное представление на мобильном устройстве?

У меня проблема с темой WordPress, когда я открываю свой веб-сайт на мобильном телефоне, тема представляет собой именно представление рабочего стола, но когда я меняю представление на мобильное представление в элементе проверки, это работает правильно.

https://www.pdfcar.com

html css wordpress themes responsive

31.05.2019 12:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

225

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я не уверен, что понял ваш вопрос, но попробуйте добавить следующую строку в тег <head> вашего HTML-файла:

<meta content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name = "viewport">

31.05.2019 12:40

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}

style>.responsiveImg1 {
    width: 50%;
    max-width: 800px;
    height: auto;
}

.clsdivmain {
    background-color: #660066; /* Green */
}

.center {
    margin: auto;
    width: 60%;
    padding: 10px;
    text-align: center;
}

.table {
    border: 1px solid black;
    width: 70%;
    margin: auto;
}

.table1 {
    padding: 10px;
    width: 70%;
    margin: auto;
}

.table2 {
    width: 70%;
    margin: auto;
    background-size: 70%;
}

.tableheader {
    width: 70%;
    height: 70%;
    margin: auto;
    background-size: 70%;
}

.tablerowwidth {
    width: 50%;
}

.tablerowwidth3 {
    width: 10%;
}

.buttonPay {
    background-color: #660066; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    width: 40%;
}

.buttonCancel {
    background-color: #0071A5; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    width: 40%;
}

.buttonPay1 {
    width: 80%;
    padding: 5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
        rgba(0, 0, 0, 0.19);
}

.buttonCancel1 {
    width: 80%;
    padding: 5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
        rgba(0, 0, 0, 0.19);
}

.headingtext1 {
    color: #063871;
    font-style: bold;
    font: 22px arial, verdana;
    padding: 5px;
    float: left;
    width: 50%;
    height: 50%;
}

.infoText {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    align: center;
    float: left;
    width: 100%;
    background-size: 100%;
}

.disclaimerText {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    align: top;
    float: left;
    width: 100%;
    background-size: 100%;
}

.labels {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    font-weight: bold;
    align: center;
    padding: 10px;
    float: left;
    width: 100%;
    margin: auto;
    background-size: 70%;
}

.generaltext {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    padding: 5px;
    align: center;
    float: left;
    width: 100%;
    background-size: 70%;
    margin: auto;
}

.variables {
    color: #063871;
    background-color: #c9c9c9;
    font-size: 15px;
    font-style: normal;
    font: 15px arial, verdana;
    align: center;
    padding: 20px;
    float: left;
    width: 100%;
    background-size: 70%;
    margin: auto;
}

.main {
    background-color: #f1f1f1;
    padding: 20px;
    float: left;
    width: 60%; /* The width is 60%, by default */
}

.right {
    background-color: #4CAF50;
    padding: 20px;
    float: left;
    width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
    .table {
        padding: 10px;
        width: 100%;
        margin: auto;
    }
    .tablerowwidth3 {
        width: 1%;
    }
    .tableheader {
        width: 100%;
    }
    .buttonPay1 {
        width: 100%;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
            rgba(0, 0, 0, 0.19);
    }
    .buttonCancel1 {
        width: 100%;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
            rgba(0, 0, 0, 0.19);
    }
    .tablerowwidth {
        width: 100%;
    }
    .headingtext1 {
        width: 100%;
        height: 50%;
    }
    .responsiveImg1 {
        width: 100%;
    }
    .table2 {
        width: 100%;
        margin: auto;
    }
    .tableheader {
        width: 100%;
        height: 70%;
        margin: auto;
    }
    .table1 {
        padding: 10px;
        width: 100%;
        margin: auto;
    }
}
</style>
</head>
<body>
    <table class = "tableheader">
        <tr>
            <td align = "right"><img src = "logo.png" clas = "responsiveImg1">
            </td>

        </tr>
    </table>
    <table class = "tableheader">
        <tr>
            <td class = "tablerowwidth" height = "10"><label
                class = "headingtext1">Heading 1</label></td>
        </tr>
    </table>
    <div class = "infoText">
        <table class = "table1">
            <tr>
                <td>Mr, </br>
                </br>Message one</br>Message two</td>
            </tr>
        </table>
    </div>

    <div class = "labels">
        <p class = "table2">Subheading one</p>
        <table class = "table">
            <tr>
                <td width = "30%">Field one</td>
                <td width = "45%" class = "generaltext">AAAAAAAA</td>
                <td width = "20%" class = "tablerowwidth3"></td>
                <td width = "20%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%">Field one</td>
                <td width = "45%" class = "generaltext">BBBBBBBB</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%">Field one</td>
                <td width = "65%" class = "generaltext">CCCCCCCCC</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%">Field one</td>
                <td width = "65%" class = "generaltext">DDDDDDDD</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%"></td>
                <td width = "65%" class = "generaltext">EEEEEEEE</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%">Field one</td>
                <td width = "65%" class = "generaltext">FFFFFFFF</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td width = "20%">Field one</td>
                <td width = "65%" class = "generaltext">GGGGGGGG</td>
                <td width = "10%" class = "tablerowwidth3"></td>
                <td width = "10%" class = "tablerowwidth3"></td>
            </tr>
            <tr>
                <td colspan = "2"><input type = "submit"
                    class = "buttonPay buttonPay1" name = "PayNow" value = "Submit"></td>
            </tr>
            <tr>
                <td colspan = "2"><input type = "submit"
                    class = "buttonCancel buttonCancel1" name = "PayCancel"
                    value = "Reset"></td>
            </tr>

        </table>
        <div class = "disclaimerText">
            <table class = "table1">
                <tr>
                    <td align = "top">---Disclaimer </br>Field. </br>Field.</br>Field.</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Добро пожаловать в Stack Overflow! Хотя этот код может ответить на вопрос, лучше включить некоторый контекст, объясняющий, как он работает и когда его использовать. Ответы только на код, как правило, менее полезны в долгосрочной перспективе. См. Как написать хороший ответ? для получения дополнительной информации.

— 01.06.2019 18:51

01.06.2019 17:58