By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,490 Members | 1,417 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,490 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>
4 Weeks Ago #1
Share this Question
Share on Google+
1 Reply


100+
P: 103
- Use code tags.
- Explain more about the question and issues that you have with the code.
4 Weeks Ago #2

Post your reply

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