Jump to content
Sign in to follow this  
Reynet

Responsive container/Centering issue.

Recommended Posts

Hey, I know this is probably a fairly simple issue but I've never coded a website before so go easy on me!

I have this page that I can't seem to get looking right on mobile AND desktop. It's either one or the other. I was hoping someone might have some insight as to how I can make the image on the left and the contact info on the right stack properly without just breaking up the text and/or making the image insanely small on a phone.

Here's a screenshot of the page: https://imgur.com/a/DLC2sjR

The other problem is that I want it all centred on the page. I mean, I can do "w3-third" for the smaller pictures at the bottom but when I use "w3-half" for the top it just aligns everything left. I want both elements to behave as though they are one on a desktop without an ugly spacing between them and stack on top of eachother on mobile.

<!DOCTYPE html>
<html>
<title>BJH Law</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
.center {
  margin: 100px;
  width: 75%;
  border: 10px solid #009688;
  padding: 100px;
 }
.column {
  float: left;
  width: 33.33%;
  padding: 100px;
 }
 .row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
img {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .8s ease-in-out;  
    }

    img:hover {
    filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
    }
</style>
<body id="myPage">

<!-- Navbar -->
<div class="w3-top">
 <div class="w3-bar w3-theme-d2 w3-left-align">
  <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-hover-white w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  <a href="index.html" class="w3-bar-item w3-button w3-teal"><i class="fa fa-home w3-margin-right"></i>Home</a>
  <a href="index.html#team" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Team</a>
  <a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a>
    <div class="w3-dropdown-hover w3-hide-small">
    <button class="w3-button" title="Notifications">Lawyers <i class="fa fa-caret-down"></i></button>     
    <div class="w3-dropdown-content w3-card-4 w3-bar-block">
      <a href="Gary.html" class="w3-bar-item w3-button">Gary L. Bainbridge</a>
      <a href="James.html" class="w3-bar-item w3-button">James D. Jodouin</a>
      <a href="Dawn.html" class="w3-bar-item w3-button">Dawn Cheecham</a>
	  <a href="Keir.html" class="w3-bar-item w3-button">Keir Vallance</a>
    </div>
  </div>
 </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium">
    <a href="index.html#team" class="w3-bar-item w3-button">Team</a>
    <a href="index.html#contact" class="w3-bar-item w3-button">Contact</a>
  </div>
</div>

<!-- Dawn Bio -->
<div class=".center">
 <div class="row">
  <div class="column">
	<img src="images/Lawyer02.jpg" alt="Boss" style="width:100%" class="w3-circle">		
	</div>
	
	 <div class="column">
  	<h1>Dawn Cheecham</h1>
    <p style="font-size: 50;"> Dawn is a Dene lawyer from the Clearwater River Dene Nation. She works closely with various First Nations governments and organizations on a wide range of issues including the duty to consult, specific claims, governance initiatives and general advice.</p>
      <p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i>  Saskatoon, SK</p>
	  <p><i class="fa fa-envelope w3-text-teal w3-large"></i>  <a href="mailto:dcheecham@bjhlaw.ca?" target="_top">dcheecham@bjhlaw.ca</a></p>
      <p><i class="fa fa-phone w3-text-teal w3-xlarge"></i>  <a href="tel:306-664-2468">[306] 664-2468</a></p>
      <p><i <i class="fa fa-fax w3-text-teal w3-large"></i> [306] 664-2469</p>
  </div>
  

<!-- Team Container -->
<div class="w3-container w3-padding-64 w3-center" id="team">

<div class="w3-row"><br>

<div class="w3-quarter">
<a href="Gary.html">
  <img src="images/Lawyer01.jpg" alt="Boss" style="width:45%" class="w3-circle">
</a>  
  <h3>GARY L. BAINBRIDGE, QC.</h3>
</div>

<div class="w3-quarter">
<a href="James.html">
  <img src="images/Lawyer03.jpg" alt="Boss" style="width:45%" class="w3-circle">
</a>
  <h3>JAMES D. JODOUIN</h3>
</div>


<div class="w3-quarter">
<a href="Keir.html">
  <img src="images/Lawyer04.jpg" alt="Boss" style="width:45%" class="w3-circle">
</a>  
  <h3>KEIR VALLANCE</h3>
</div>

</div>
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-10 w3-theme-d1 w3-center">
  <p>Copyright <a href="http://www.bjhlaw.ca/" target="_blank">BJH LAW 2019</a></p>

  <div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-right">
    <span class="w3-text w3-padding w3-teal w3-hide-small">Go To Top</span>   
    <a class="w3-button w3-theme" href="#myPage"><span class="w3-xlarge">
    <i class="fa fa-chevron-circle-up"></i></span></a>
  </div>
</footer>

<script>
// Script for side navigation
function w3_open() {
  var x = document.getElementById("mySidebar");
  x.style.width = "300px";
  x.style.paddingTop = "10%";
  x.style.display = "block";
}

// Close side navigation
function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>

Yeah the codes a mess please don't make fun lol.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...