Help - Search - Members - Calendar
Full Version: Not sure why this is all messed up on mobile
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
mixmasterjacob
Can someone please help me out here. On desktop it looks great, but on mobile its terrible. The code should account for mobile as it is nothing fancy. Thanks!

[url]www.autoxicology.com
[/url]

Code: Select all
/*
* Template Name:
* Version: 1.0
* Author:
* Twitter:
* License: Creative Commons Attribution 3.0 License
* Website:
*/
/* styles.css */
/* ======= Base ======= */
body {
font-family: 'Roboto', sans-serif;
color: #545E6C;
background: #f5f5f5;
font-size: 14px;
padding: 30px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
a {
color: #2d7788;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
@media screen and (max-width:320px) {
/* CSS for screens that are 320 pixels or less will be put in this section */
}
a:hover {
text-decoration: underline;
color: #1a454f;
}
a:focus {
text-decoration: none;
}
p {
line-height: 1.5;
}
.wrapper {
background: #42A8C0;
max-width: 960px;
margin: 0 auto;
position: relative;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.sidebar-wrapper {
background: #42A8C0;
position: absolute;
right: 400;
width: 290px;
height: 100%;
min-height: 800px;
color: #fff;
}
.sidebar-wrapper a {
color: #fff;
}
.sidebar-wrapper .profile-container {
padding: 30px;
background: rgba(0, 0, 0, 0.2);
text-align: center;
color: #fff;
}
.sidebar-wrapper .name {
font-size: 16px;
font-weight: 600;
margin-top: 0;
margin-bottom: 10px;
}
.sidebar-wrapper .tagline {
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
}
.sidebar-wrapper .profile {
margin-bottom: 15px;
}
.sidebar-wrapper .contact-list .fa {
margin-right: 5px;
font-size: 18px;
vertical-align: middle;
}
.sidebar-wrapper .contact-list li {
margin-bottom: 15px;
}
.sidebar-wrapper .contact-list li:last-child {
margin-bottom: 0;
}
.sidebar-wrapper .contact-list .email .fa {
font-size: 1imgpx;
}
.sidebar-wrapper .container-block {
padding: 30px;
}
.sidebar-wrapper .container-block-title {
text-transform: uppercase;
font-size: 16px;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
}
.sidebar-wrapper .degree {
font-size: 14px;
margin-top: 0;
margin-bottom: 5px;
}
.sidebar-wrapper .education-container .item {
margin-bottom: 15px;
}
.sidebar-wrapper .education-container .item:last-child {
margin-bottom: 0;
}
.sidebar-wrapper .education-container .meta {
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
margin-bottom: 0px;
margin-top: 0;
}
.sidebar-wrapper .education-container .time {
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
margin-bottom: 0px;
}
.sidebar-wrapper .languages-container .lang-desc {
color: rgba(255, 255, 255, 0.6);
}
.sidebar-wrapper .languages-list {
margin-bottom: 0;
}
.sidebar-wrapper .languages-list li {
margin-bottom: 10px;
}
.sidebar-wrapper .languages-list li:last-child {
margin-bottom: 0;
}
.sidebar-wrapper .interests-list {
margin-bottom: 0;
}
.sidebar-wrapper .interests-list li {
margin-bottom: 10px;
}
.sidebar-wrapper .interests-list li:last-child {
margin-bottom: 0;
}
.main-wrapper {
background: #fff;
padding: 0px;
padding-right: 100px;
padding-left: 330px;
}
.main-wrapper .section-title {
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
color: #2d7788;
position: relative;
margin-top: 0;
margin-bottom: 20px;
}
.main-wrapper .logo {
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
display:block;
}
.bottom img{
vertical-align:bottom;

}

.main-wrapper .section-title .fa {
width: 30px;
height: 30px;
margin-right: 8px;
display: inline-block;
color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #2d7788;
text-align: center;
padding-top: 8px;
font-size: 16px;
position: absolute;
top: -2px;
}
.main-wrapper .section {
margin-bottom: 60px;
}
.main-wrapper .experiences-section .item {
margin-bottom: 30px;
}
.main-wrapper .upper-row {
position: relative;
overflow: hidden;
margin-bottom: 2px;
}
.main-wrapper .job-title {
color: #3F4650;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
font-weight: 500;
}
.main-wrapper .time {
position: absolute;
right: 0;
top: 0;
color: #97AAC3;
}
.main-wrapper .company {
margin-bottom: 10px;
color: #97AAC3;
}
.main-wrapper .project-title {
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: 5px;
}
.main-wrapper .projects-section .intro {
margin-bottom: 30px;
}
.main-wrapper .projects-section .item {
margin-bottom: 15px;
}
.skillset .item {
margin-bottom: 15px;
overflow: hidden;
}
.skillset .level-title {
font-size: 14px;
margin-top: 0;
margin-bottom: 12px;
}
.skillset .level-bar {
height: 12px;
background: #f5f5f5;
}
.skillset .level-bar-inner {
height: 12px;
background: #7bc2d3;
}
.footer {
padding: 30px;
padding-top: 60px;
}
.footer .copyright {
line-height: 1.6;
color: #AFAFAF;
font-size: 13px;
}
.footer .fa-heart {
color: #fb866a;
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
.sidebar-wrapper {
position: static;
width: inherit;
}
.main-wrapper {
padding: 30px;
}
.main-wrapper .time {
position: absolute;
display: block;
margin-top: 5px;
}
.main-wrapper .upper-row {
margin-bottom: 0;
}
}
/* Small devices (tablets, 768px and up) */
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.skillset .level-title {
display: inline-block;
float: left;
width: 30%;
margin-bottom: 0;
}
.skillset .level-bar {
display: inline-block;
width: 70%;
float: left;
position: relative;
top: 1px;
}
}
/* Large devices (large desktops, 1200px and up) */
/* Ex-Large devices (large desktops, 1200px and up) */


Code: Select all
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>AUTOXICOLOGY - Dr. Bruce A. Goldberger</title>
<!-- Meta -->
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=0.5;" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dr. Bruce A. Goldberger">
<meta name="robots" content="autoxicology, forensic, forensic toxicology, clinical toxicology, medical toxicology, bruce goldberger" />
<meta name="author" content="Jacob Goldberger">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css? family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900ita
lic' rel='stylesheet' type='text/css'>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">

<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="wrapper">
<div class="sidebar-wrapper">
<div class="profile-container">
<img class="profile" src="assets/images/profile.jpeg" alt="" />
<h1 class="name">Dr. Bruce A. Goldberger</h1>
<h3 class="tagline"> Toxicologist</h3>
</div><!--//profile-container-->

<div class="contact-container container-block">
<ul class="list-unstyled contact-list">
<li class="email"><i class="fa fa-envelope"></i><a href="mailto:bgoldberger@autoxicology.com">bgoldberger@autoxicology.com</a></li>
<li class="phone"><i class="fa fa-phone"></i><a href="tel:352-258-6125">(352) 258-6125</a></li>
<li class="phone"><i class="fa fa-fax"></i><a>(866) 388‐3028</a></li>
<li class="website"><i class="fa fa-globe"></i><a href="http://www.autoxicology.com" target="_blank">autoxicology.com</a></li>
</ul>
</div><!--//contact-container-->
<div class="education-container container-block">
<h2 class="container-block-title">Education</h2>
<div class="item">
<h4 class="degree">B.A. degree in Zoology</h4>
<h5 class="meta">Drew University</h5>
<div class="time">May, 1982</div>
</div><!--//item-->
<div class="item">
<h4 class="degree">M.S. degree in Forensic Toxicology</h4>
<h5 class="meta">University of Maryland School of Medicine</h5>
<div class="time">August, 1985</div>
</div><!--//item-->
<div class="item">
<h4 class="degree">Ph.D. degree in Forensic Toxicology</h4>
<h5 class="meta">University of Maryland School of Medicine</h5>
<div class="time">January, 1993</div>
</div><!--//item-->
</div><!--//education-container-->

<div class="languages-container container-block">
<h2 class="container-block-title">Download CV</h2>
<ul class="list-unstyled interests-list">
<li> <a href="Bruce_Goldberger_CV_(April 2017).pdf" download> April - 2017</a></li>
</ul>
</div><!--//interests-->


</div><!--//sidebar-wrapper-->

<div class="main-wrapper">

<img src="img/BruceTox_Logo_Web.png" border="0" height="180" width="440" style="PADDING-LEFT: 120px; PADDING-BOTTOM: 30px; PADDING-TOP: 20px;">

<section class="section summary-section">
<h2 class="section-title"><i class="fa fa-user"></i>Biography</h2>

<div class="summary">
<p>Dr. Bruce Goldberger is a Professor and the Chief of the Division of Forensic Medicine in the Department of Pathology, Immunology and Laboratory Medicine in the College of Medicine at the University of Florida in Gainesville, Florida. Dr. Goldberger holds a joint Professor position in the Department of Psychiatry Division of Addiction Medicine. Dr. Goldberger is the Medical Director of UF Health Pathology Laboratories Clinical Toxicology Laboratory, the Director of the William R. Maples Center for Forensic Medicine, and the Program Director of the Florida Emergency Mortuary Operations Response System. <br> <p>

Dr. Goldberger is the Technical and Administrative Director of the Forensic Toxicology Laboratory at the University of Florida which provides toxicological services to Medical Examiner Offices and State and local law enforcement agencies throughout the State of Florida. Dr. Goldberger has been qualified as an expert witness more than 300 times in forensic toxicology in Federal, State, Military and Canadian courts of law. <br> <p>

Dr. Goldberger received a Bachelor of Arts Degree in Zoology from Drew University in Madison, New Jersey and Master of Science and Doctor of Philosophy Degrees in Forensic Toxicology from the University of Maryland School of Medicine in Baltimore, Maryland. Dr. Goldberger is a Fellow of the American Board of Forensic Toxicology and the National Academy of Clinical Biochemistry.<br> <p>

Dr. Goldberger is the editor-in-chief of the Journal of Analytical Toxicology. Dr. Goldberger is a past-President of the American Academy of Forensic Sciences and Society of Forensic Toxicologists, the President of the American Board of Forensic Toxicology, and the Treasurer of the Forensic Specialties Accreditation Board.<br> <p>

Dr. Goldberger has published numerous articles, reviews and chapters related to forensic toxicology and is co-editor of the Handbook of Workplace Drug Testing, 1st and 2nd editions, On-Site Drug Testing and Garriott’s Medicolegal Aspects of Alcohol, 6th Edition. Dr. Goldberger’s studies in forensic toxicology have included the analysis of alcohol in blood and breath and the measurement of therapeutic, abused and emerging drugs in biological fluids.<br> <p>

In recognition of his student research achievements in forensic toxicology, Dr. Goldberger was presented with the first annual Sunshine Award from the Toxicology Section of the American Academy of Forensic Sciences in 1988. In addition, he was the 1994 recipient of the American Association for Clinical Chemistry's Outstanding Scientific Achievements by a Young Investigator Award. In 2004, Dr. Goldberger was the recipient of The International Association of Forensic Toxicologists' mid-career achievement award for excellence in forensic toxicology. Dr. Goldberger also received the Alexander O. Gettler Award in recognition of his outstanding contributions to the field and profession of forensic toxicology from the Toxicology Section of the American Academy of Forensic Sciences in 2006, the Outstanding Achievement Award from the Florida Association of Medical Examiners in 2008, and the Achievement in the Sciences Award from Drew University in 2012. In recognition of his outstanding contributions to the field of alcohol- and drug-related traffic safety, Dr. Goldberger was the recipient of the National Safety Council’s 2017 Robert F. Borkenstein Award. <br> <p>
<hr>
</div><!--//summary-->
</section><!--//section-->

</div><!--//main-body-->
</div>

<footer class="footer">
<div class="text-center">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. smile.gif If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Copyright © 2017, AUTOXICOLOGY, Inc. All rights reserved. </small>
</div><!--//container-->
</footer><!--//footer-->

<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
pandy
In what way is it terrible on your mobile? On mine it's fine. The blue sidebar is on top and the text part has dropped below it. Everything fits on my screen without me having to scroll sideways.

I attach a screen cap from where the sidebar ends and the text begins.

Click to view attachment
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.