Блок Div Дисплей на мобильном телефоне

Question

Я хочу отображать свой «третий_div» как блок в мобильном и встроенном виде на рабочем столе, но мой медиа-запрос не работает. Я прикрепил две фотографии, которые показывают, чего я хочу достичь. Как я могу это исправить? picture one

picture two

<h2 style="text-align: center;font-size: 25px;font-family: Arial, Helvetica, sans-serif;line-height: 1.3; 
 
margin-bottom: 18px; 
 
font-weight: 400;"><strong>Premium Transportation Servicing The Dominican Republic</strong></h2> 
 
<p style="text-align: center;">Transekur is the only company in the Dominican Republic dedicated exclusively to providing premium transportation and airport transfers in private, luxurious vehicles. No matter how big or small your vacation party, we have the transportation to fit your needs.</p> 
 
&nbsp; 
 
<div style="width: 100%; background-color: white; border: 1px solid grey; height:100%;"> 
 
<div id="first_div" style="width: 100%; background-color: #ca7a09;"> 
 
<h2 style="text-align: center; color: white; padding-top: 5%;font-size: 36px;">The benefits of using Transekur</h2> 
 
<div style="display: flex; display: -webkit-flex; overflow: auto;"> 
 
<div class="first_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto; padding-top: 12%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/wifi.png" /> 
 
<h3 style="text-align: center; color: white;padding-top: 3%;padding-left:2%;">FREE Wi-Fi service</h3> 
 
<p style="text-align: center; color: white;padding-top: 15%;padding-left:2%;">All of our modern luxury vehicles come equipped with mobile hotspot Wi-Fi service, so that you always have internet on the go. 
 
</p> 
 

 
</div> 
 
<div class="second_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/phone-1.png" /> 
 
<h3 style="text-align: center; color: white; padding-top: 16%;">FREE Phone Service</h3> 
 
<p style="text-align: center; color: white;padding-left:2%;padding-top: 1%;">A mobile phone with unlimited calls within the Dominican Republic, the United States, Puerto Rico and Canada is provided free of charge for our clients during the rental period</p> 
 

 
</div> 
 
<div class="thirdt_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;padding-top: 15%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/car-1.png" /> 
 
<h3 style="text-align: center; color: white; padding-top: 1%;">New Vehicles</h3> 
 
<p style="text-align: center; color: white; padding-top: 15%;padding-left:2%;"> Transekur Premium Transport’s fleet of modern luxury SUV’s and limo buses come with leather interior, tinted windows, WiFi service, and cold beverages. These come standard in all of our vehicles.</p> 
 

 
</div> 
 
<div class="fourth_image" style="width: 25%;"> 
 

 
<img style="display: block; margin-left: auto; margin-right: auto; padding-top: 5%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/driver.png" /> 
 
<h3 style="text-align: center; color: white; padding-top: 11%;">Bilingual Drivers</h3> 
 
<p style="text-align: center; color: white; padding-top: 13%;padding-right:5%">We are excellent communicators. If English is not your primary language, our drivers also speak French, German, Italian, Portuguese, and Spanish.</p> 
 

 
</div> 
 
</div> 
 
<!-- End of the first iner div flex div --> 
 

 
</div> 
 
<!-- End of the first div --> 
 
<div id="second_div" style="width: 100%; background-color: white; display: flex; display: -webkit-flex;height:100%;"> 
 
<div style="width: 50%;"> 
 
<p style="text-align: center;">Visited October 2016</p> 
 
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 50%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/avatar030-1.jpg" /> 
 
<h2 style="text-align: center; color: gray;">Yezabel D</h2> 
 
</div> 
 
<div style="width: 50%;"> 
 
<a href="https://www.tripadvisor.com/ShowUserReviews-g147289-d10263324-r425689594-Transekur-Santo_Domingo_Santo_Domingo_Province_Dominican_Republic.html#CHECK_RATES_CONT" style="text-align: center; color: gray; margin-left: auto; margin-right: auto; padding-right: 10%;font-size:20px;color:#ca7a09;" target="_blank">"The best service there is, at a price you can’t resist."</a> 
 
<p style="margin-left: auto; margin-right: auto; padding-right: 10%;">I want to let you know how much my husband and I enjoyed our trips with Transekur. We used your service for trips to the Punta Cana airport. Very nice. Both of your drivers were on time and very courteous. We had used other services when we traveled to the Dominican before, needless to say yours is superior. Thank you for a trouble free ride to and from the airport, we will highly recommend your service to family and friends!</p> 
 

 
</div> 
 
</div> 
 
<!-- End of the second first div --> 
 
<div id="third_div" style="width: 100%; background-color: #363636;display:inline-block"> 
 
<style>@media only screen 
 
and (min-device-width: 320px) { 
 
    #third_div{ 
 
    display:block; 
 
    } 
 
}</style> 
 
<img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/03/logo_transekur.png"/> 
 
<h2 style="color:white;padding-left:50%;padding-top:2%;">Book Transport With Us Today!<h2> 
 
<p><a href="tel:18888858708">1-888-885-8708</a></p> 
 
<p><img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/testgif.gif" style="width: 48px; 
 
height:24px;" /></p> 
 

 
</div> 
 
</div>

Answer 1

Для СМИ запросов Я хотел бы предложить принимать мобильные первый подход. Так установить display:block; в качестве стиля по умолчанию, а затем только изменить его display:inline-block; когда окно равно или больше, чем 320px (добавлены некоторые spans, чтобы показать, что он работает):

#third_div { 
 
    display:block; 
 
    width:100%; 
 
    background-color:#363636; 
 
    color:white; 
 
} 
 
.mobile { 
 
    display:block; 
 
} 
 
.desktop { 
 
    display:none; 
 
} 
 

 
@media only screen and (min-width:320px) { 
 
    #third_div { 
 
    display:inline-block; 
 
    color:red; 
 
    } 
 
    .mobile { 
 
    display:none; 
 
    } 
 
    .desktop { 
 
    display:block; 
 
    } 
 
}

<div id="third_div"><span class="desktop">DESKTOP</div><span class="mobile">MOBILE</div></div>

Не уверен, если вы делаете e-blast или что-то, но я бы посоветовал не использовать встроенный стиль. Использование внешнего CSS намного чище и легко управляется.

Answer 2

Используйте следующий код:

Для рабочего стола:

#third_div { 
    display: inline-block; 
} 

Для мобильного:

@media only screen and (min-width:320px) and (max-width:767px) { 
    #third_div { 
     display: block; 
    } 
} 

Или Альтернативное решение

Для мобильного

#third_div { 
    display: block; 
} 

для рабочего стола

@media only screen and (min-width: 1024px) { 
    #third_div { 
     display: inline-block; 
    } 
}