Jump to content

Can't get the image resolution to adopt to different display sizes.

CLHarrison

By CLHarrison
in HTML/XHTML

 Share

Recommended Posts

WolfLord Skywalker Newbie

WolfLord Skywalker

Posted
Posted

@CLHarrison more examples for reference

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

As you can see, by specifying that h1 should be blue when you type text in h1 it will be blue.

Also this helps (forget the php for now)

<!DOCTYPE html>

<html>

<body>

 

<h1>The textarea wrap attribute</h1>

 

<form action="/action_page.php">

<textarea rows="2" cols="20" name="usrtxt" wrap="hard">

At W3Schools you will find free Web-building tutorials.

</textarea>

<input type="submit">

</form>

 

</body>

</html>

It specifies what text to be wrapped 

Link to comment
Share on other sites
  • Replies 57
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ingolme
Ingolme

You have a lot of different <head> and <body> tags. There should only be one <head> and one <body>. Every HTML document should have a structure similar to this: <!DO

CLHarrison
CLHarrison

So, don't do what I did which is this: /* Add a background image with some padding */ .body {   font-family: 'Cairo', sans-serif;   padding-left: 360px;   padding-right: 360px;   paddin

CLHarrison
CLHarrison

I've been out of pocket a bit as we are frantically packing up the house to move.  It looks like it might be the end if June before I'm settled in again and have time to pick this back up.   I wi

Posted Images

CLHarrison Newbie

CLHarrison

Posted
  • Author
Posted

Here is the basis of what the setup looks like for a couple of the pages.  The other pages have a single column.  The split between them is what I'm concerned with.  But I may be overthinking it.  If I don't specifically denote two columns, I think I will only get one that will go 100% width and not be impacted by the statement that setups the two columns.  

The rest I more or less have figured out I think.

* {
  box-sizing: border-box;
}

/* Add a background image with some padding */
.body {
  font-family: 'Cairo', sans-serif;
  padding: 30px;
  margin: 20px;
  background-image: url("images/Blue_Background.webp"); 
}

#wrapper1 {
  padding-left: 360px;
  padding-right: 360px;
  padding-top:  30px;
  padding-bottom:  30px;
}
  
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Header/Blog Title */
.header {
  padding: 10px;
  font-size: 40px;
  text-align: center;
  background: white;
}
img {
  float: right;
}

.topnav {
  overflow: hidden;
  background-color: #0000b2;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #008bff;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #0033ff;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
  margin-bottom: 30px;
}


/* Add a card effect for articles */
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 40px;
  text-align: center;
  background: #ddd;
  margin-top: 60px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
}
</style>
</head>
<div id="wrapper1"
  <div class="body">
    <div class="header">
  <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
  <h1>Train With A Purpose</h1>
  <p style="font-size:72%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>
  </div>

<div class="topnav" id="myTopnav">
  <a href="home.html" class="active">Home</a>
  <a href="blogpage2.html">Head Games</a>
  <div class="dropdown">
    <button class="dropbtn">Tutorial Musings  
      <i class="fa fa-caret-down"></i>
    </button>  
    <div class="dropdown-content">
      <a href="AboutThatStance.html">About That Stance</a>
      <a href="HandgunPresentation.html">Handgun Presentation</a>
      <a href="TheProperGrip.html">The Proper Grip</a> 
    </div> 
</div>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</div>

 

Link to comment
Share on other sites
WolfLord Skywalker Newbie

WolfLord Skywalker

Posted
Posted

So @CLHarrison

I think it would help if you replaced the 

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

with 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>.

perhaps it's a fitting to screen problem. Of u try it and/or make any breakthrougs tell me.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Try to avoid width 100%, if you have margins/padding these can increase the width by their size x 2.

Just remove float with float: none; and because they are block elements they will stretch to the total width available to them, so just set width: to width auto;

AND AGAIN! media queries GO BELOW non media query css, Cascading Style Sheet read from top to bottom, you will have conflict if media queries and non media query css are mixed.

Link to comment
Share on other sites
  • 2 weeks later...
CLHarrison Newbie

CLHarrison

Posted
  • Author
Posted

I've been out of pocket a bit as we are frantically packing up the house to move.  It looks like it might be the end if June before I'm settled in again and have time to pick this back up.  

I will say again that I really appreciate all the help you have given me, it has made a huge impact and I've learned a lot from your suggestions and resource suggestions. 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...