Mobile Display of Div Blocks

Question

Mobile Display of Div Blocks

I am having trouble with my media query not working to display "third_div" as a block in mobile and inline on a desktop. I have included two pictures demonstrating what I want to achieve. How can I resolve this issue? View Picture One

View 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;
...
...
...
...
 <!-- End of the 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>

html css

Answer 1

Answer №1

Incorporating media queries, my recommendation would be to adopt a mobile-first strategy. Begin by setting display:block; as the default style and then switch it to display:inline-block; when the window reaches 320px or larger (I included some spans for visual demonstration):

#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>

If you are creating an e-blast or a similar project, it is best to avoid inline styling. Utilizing external CSS offers a cleaner and more manageable approach.

Answer 2

Incorporating media queries, my recommendation would be to adopt a mobile-first strategy. Begin by setting display:block; as the default style and then switch it to display:inline-block; when the window reaches 320px or larger (I included some spans for visual demonstration):

#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>

If you are creating an e-blast or a similar project, it is best to avoid inline styling. Utilizing external CSS offers a cleaner and more manageable approach.

Answer 3

Answer №2

Here is the recommended code snippet:

For desktop:

#third_div {
    display: inline-block;
}

If you are optimizing for mobile devices, consider using the following code:

For mobile:

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

Alternatively, you can also try this solution:

For mobile:

#third_div {
    display: block;
}

For desktop:

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

Answer 4

Here is the recommended code snippet:

For desktop:

#third_div {
    display: inline-block;
}

If you are optimizing for mobile devices, consider using the following code:

For mobile:

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

Alternatively, you can also try this solution:

For mobile:

#third_div {
    display: block;
}

For desktop:

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

Mobile Display of Div Blocks

Answer №1

Answer №2

Similar questions

Guide on receiving a date input in a datetime format upon clicking a submit button

Dealing with JSON data in the format of `(Object object)` requires a specific approach

Can you tell me how to implement a shopping basket in vue.js that only appears when an item has been added to it?

JavaScript not functioning on Express-powered HTML document

`Selecting the ideal dropdown menu placement`

What could be the reason for having two HTML nodes within a one-node HTML document?

When I click on any input field, button, or other controls on a webpage, the page automatically zoom

Safari 5 experiences delays with JQuery and CSS3 animations

Creating a customized display on a webpage using XML and XSL to generate unique

Customizing and adjusting the CSS for all individuals accessing the website

The positioning of drawings on canvas is not centered

Prevent the cursor from exiting the div element when the tab key is pressed

Having trouble getting my AngularJS directive with a number in the name to function properly

Is it possible to display a subtle grey suggestion within an HTML input field using only CSS?

Is there a way to display the # symbol instead of characters in the input text field?

``Incorporate images into a slideshow container with proper alignment

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

Incorporating Ace Editor into a jQuery UI Resizable Element