By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,529 Members | 926 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,529 IT Pros & Developers. It's quick & easy.

@media query

P: 1
Hello

Please I want helpfixing responsiveness of the below on across devices

Expand|Select|Wrap|Line Numbers
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.         <style>
  6.             *{
  7.     margin:0px;
  8.   padding:0px;
  9.   box-sizing: border-box;
  10.             }
  11.             #image {
  12.         float:right;
  13.         margin-left:0px;
  14.         margin-top:0px;
  15.         width:50px; 
  16.         height:50px;        
  17.             }
  18. @media (min-width: 1025px) and (max-width: 1280px) {
  19.  
  20. }
  21.  
  22. /* 
  23.   ##Device = Tablets, Ipads (portrait)
  24.   ##Screen = B/w 768px to 1024px
  25. */
  26.  
  27. @media (min-width: 768px) and (max-width: 1024px) {
  28.  
  29.  
  30. }
  31.  
  32. /* 
  33.   ##Device = Tablets, Ipads (landscape)
  34.   ##Screen = B/w 768px to 1024px
  35. */
  36.  
  37. @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  38.  
  39. }
  40.  
  41. /* 
  42.   ##Device = Low Resolution Tablets, Mobiles (Landscape)
  43.   ##Screen = B/w 481px to 767px
  44. */
  45.  
  46. @media (min-width: 481px) and (max-width: 767px) {
  47.   #text{
  48.         font-size:1px;
  49.         padding:10px;
  50.         margin-top:0%;
  51.         margin-right:0px;
  52.         float:right;
  53.     }
  54.     #image{
  55.         float:right;
  56.         margin-top:0px;
  57.         margin-right:0px;
  58.         margin-left:20px;
  59.         width:50px; 
  60.         height:50px;
  61.     }
  62.             }
  63. /* 
  64.   ##Device = Most of the Smartphones Mobiles (Portrait)
  65.   ##Screen = B/w 320px to 479px
  66. */
  67.  
  68. @media (min-width: 320px) and (max-width: 480px) {
  69.     #image{
  70.         padding:0px;
  71.         float:left;
  72.         margin-left: 20px;
  73.         margin-bottom: 0px;
  74.         margin-top:0px;
  75.         margin-right:0px;
  76.         width:50px; 
  77.         height:50px;
  78.         border-radius:50%
  79.     }
  80.  
  81.         #text{
  82.         font-size:10px;
  83.         padding:20px;
  84.         margin-left:20px;
  85.         margin-top:0px;
  86.         margin-bottom:0px;
  87.         margin-right:0px;
  88.         float:left;
  89.  
  90.     }
  91.             }
  92.         </style>
  93.     </head>
  94.             <body>
  95.                                 <div id = "image" style = "margin:0px 0px 0px 0px;">
  96.             <img src="https://ebluebyte.com/wp-content/uploads/2018/08/nicholas.jpg" alt="Nicholas" style ="border-radius:50%">
  97.                         </div>
  98.  
  99.                         <div id = "text">
  100.                         <a  style = "font-family:'Lato', 'Arial', 'sans-serif'; font-size:20px; text-decoration:none; float:right; margin:0px 0px 0px 0px;" href = "https://www.linkedin.com/in/nicholas-zobi-046709b4/"><strong>Zobi</strong> Nicholas</a>
  101.                         </div>
  102.  
  103.                 <div id = "movement">
  104.                             <marquee>Welcome and thank you for visiting. For suggestions and booking kindly send me an email @ nicholas@ebluebyte.com </marquee>
  105.     </div>
  106.     </body>
  107.             </html>
Aug 25 '19 #1
Share this Question
Share on Google+
2 Replies


dev7060
Expert 100+
P: 202
- Use code tags.
- Explain more about the question and issues that you have with the code.
Aug 25 '19 #2

P: 6
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  8.  
  9.  
  10. .column {
  11.   float: left;
  12.   width: 30%;
  13.   padding: 22px;
  14. }
  15.  
  16.  
  17. .row:after {
  18.   content: "";
  19.   display: table;
  20.   clear: both;
  21. }
  22.  
  23.  
  24. @media screen and (max-width: 900px) {
  25.   .column {
  26.     width: 55%;
  27.   }
  28. }
  29.  
  30.  
  31. @media screen and (max-width: 700px) {
  32.   .column {
  33.     width: 100%;
  34.   }
  35. }
  36. </style>
  37. </head>
  38. <body>
  39.  
  40. <h2>Responsive Four Column Layout</h2>
  41. <p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 900px wide or less, the columns will resize from four columns to two columns. On screens that are 700px wide or less, the columns will stack on top of each other instead of next to eachother.</p>
  42.  
  43. <div class="row">
  44.   <div class="column" style="background-color:#aaa;">
  45.   <h2>Column 1</h2>
  46.   </div>
  47.   <div class="column" style="background-color:#bbb;">
  48.   <h2>Column 2</h2>
  49.   </div>
  50.   <div class="column" style="background-color:#ccc;">
  51.   <h2>Column 3</h2>
  52.   </div>
  53.   <div class="column" style="background-color:#ddd;">
  54.   <h2>Column 4</h2>
  55.   </div>
  56. </div>
  57.  
  58. </body>
  59. </html>
4 Weeks Ago #3

Post your reply

Sign in to post your reply or Sign up for a free account.