@media query

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nichol32
    New Member
    • Aug 2019
    • 1
    #1

    @media query

    Hello

    Please I want helpfixing responsiveness of the below on across devices

    Code:
    <!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			*{
	margin:0px;
  padding:0px;
  box-sizing: border-box;
			}
			#image {
		float:right;
		margin-left:0px;
		margin-top:0px;
		width:50px; 
		height:50px;		
			}
@media (min-width: 1025px) and (max-width: 1280px) {
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
 
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  #text{
		font-size:1px;
		padding:10px;
		margin-top:0%;
		margin-right:0px;
		float:right;
	}
	#image{
		float:right;
		margin-top:0px;
		margin-right:0px;
		margin-left:20px;
		width:50px; 
		height:50px;
	}
			}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
	#image{
		padding:0px;
		float:left;
		margin-left: 20px;
		margin-bottom: 0px;
		margin-top:0px;
		margin-right:0px;
		width:50px; 
		height:50px;
		border-radius:50%
	}
			
		#text{
		font-size:10px;
		padding:20px;
		margin-left:20px;
		margin-top:0px;
		margin-bottom:0px;
		margin-right:0px;
		float:left;

	}
			}
		</style>
	</head>
			<body>
								<div id = "image" style = "margin:0px 0px 0px 0px;">
			<img src="https://ebluebyte.com/wp-content/uploads/2018/08/nicholas.jpg" alt="Nicholas" style ="border-radius:50%">
						</div>
						
						<div id = "text">
						<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>
						</div>
							
				<div id = "movement">
							<marquee>Welcome and thank you for visiting. For suggestions and booking kindly send me an email @ nicholas@ebluebyte.com </marquee>
	</div>
	</body>
			</html>
    Last edited by gits; Aug 26 '19, 12:56 PM. Reason: please use code tags
    Tags: None
    • dev7060
      Recognized Expert Contributor
      • Mar 2017
      • 656
      #2
      - Use code tags.
      - Explain more about the question and issues that you have with the code.

        Comment

        • Sherin
          New Member
          • Jan 2020
          • 77
          #3
          Code:
          <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}


.column {
  float: left;
  width: 30%;
  padding: 22px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 900px) {
  .column {
    width: 55%;
  }
}


@media screen and (max-width: 700px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout</h2>
<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>

<div class="row">
  <div class="column" style="background-color:#aaa;">
  <h2>Column 1</h2>
  </div>
  <div class="column" style="background-color:#bbb;">
  <h2>Column 2</h2>
  </div>
  <div class="column" style="background-color:#ccc;">
  <h2>Column 3</h2>
  </div>
  <div class="column" style="background-color:#ddd;">
  <h2>Column 4</h2>
  </div>
</div>

</body>
</html>

            Comment

            Previous template Next
            Working...