I have multiple breakpoints using CSS media queries. My problem lies within the media query for 320px. When setting the viewport to 320px, the media query for 320px is not loaded. The media query for 640px is loaded instead of the query for 320px. Why?
My html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com">
<meta name="keywords" content="Websites, Web Design, Web Developement, Interactive Design, Search Engine Optimization, SEO, Motion Graphics, Video Editing, Graphic Design, Print, Branding, Logo">
<title>Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mediaQueries.css">
</head>
<body>
<section class="container clearfix">
<section id="navBar" class="grid_12">
</section>
<header id="banner" class="grid_12">
<div class="container headlineContainer">
<h1>
<p><strong>Creative</strong></p>
<p><strong>Graphic • Web • Motion</strong></p>
<p><strong>Designs</strong></p>
</h1>
</div>
<div class="container arrowContainer">
<div id="arrow">
<img src="img/arrow.png" alt="Scroll Down">
</div>
</div>
</header>
<section class="stretch grid_12"></section>
<footer id="footer" class="grid_12">
</footer>
</section>
<script type="text/javascript" src="jscript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery.fittext.js"></script>
<script type="text/javascript">
jQuery("h1, h2, h3, p").fitText(2)
</script>
</body>
</html>
My css:
/******* Global Styles ******************************************/
body {
font-family: 'Rajdhani', sans-serif;
color: #333;
font-size: 50px;
font-weight: 400;
}
img {
max-width: 100%;
}
/******* Typography Styles *************************************/
strong {
color: #fff;
font-weight: 500;
}
span #bold {
font-weight: 700;
}
h2 {
color: #333;
}
/******* Header Styles *********************************************/
#banner {
background: #333 url('bg/banner.png') no-repeat right top;
background-size: cover;
height: 600px;
}
.headlineContainer {
height: 40%;
float: left;
padding-top: 12.5%;
font-size: .6em;
}
.headlineContainer h1 {
line-height: 0em;
text-align: center;
}
.arrowContainer {
float: left;
height: 10%;
padding-top: 10%;
}
#arrow {
height: 100%;
width: 7%;
margin: auto;
}
/******* test styles ***************************************/
.stretch {
height: 2000px;
}
My media queries:
/******* Tablet Landscape *************************************/
#media(max-width: 1024px) {
#banner {
height: 400px;
}
.headlineContainer {
padding-top: 15%;
}
.arrowContainer {
padding-top: 9%;
}
}
/******* Tablet Portrait *******************************/
#media(max-width: 768px) {
#banner {
height: 300px;
}
.headlineContainer {
padding-top: 13.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
/******* Phone Landscape **********************************************/
#media(max-width: 480px) {
.headlineContainer {
padding-top: 12%;
}
.arrowContainer {
padding-top: 2%;
}
}
/******* Phone Portrait ********************************/
#media(max-width: 320px) {
.headlineContainer {
padding-top: 22%;
}
.arrowContainer {
padding-top: 0;
}
}
/******* Odd Breakpoints **************************/
#media(max-width: 1200px) {
#banner {
height: 500px;
}
.headlineContainer {
padding-top: 11.5%;
}
.arrowContainer {
padding-top: 9%;
}
}
#media(max-width: 896px) {
#banner {
height: 350px;
}
.headlineContainer {
padding-top: 10.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
#media(max-width: 640px) {
#banner {
height: 200px;
}
.headlineContainer {
padding-top: 6.5%;
}
.arrowContainer {
padding-top: 4%;
}
}
#media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your #media(max-width: 640px) media query comes after #media(max-width: 320px), the rules or equal specificity in the larger media query will override those in the smaller media query.
The simplest fix would be to order your media queries from the largest screen size to smallest.
If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.
#media (min-width:320px) and (max-width: 640px) {
}
Related
I'm picking up bootstrap after some time away,
I trying to create a simple responsive page
but I'm finding that when I resize the browser to a certain point
my central div overlaps the div above.
I've tried adjusting media queries, setting the top margins etc.
I've mocked up a page for viewing below
Thanks
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bwin slot game</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="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]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</head>
<body>
<div class="container-fluid">
<div class="sitebg">
<div class="row">
<div class="col-md-12 clearfix header">
<div id="tContainer"></div>
</div>
</div>
<div class="row">
<div id="game_container">
<div class="col-md-8">
<div id="sContainer" class="pull-right"></div>
</div>
<div class="col-md-4">
<div id="sContainer2"></div>
</div>
</div>
</div>
<div class=" row clearfix">
<div class="col-md-12"><div id="bContainer"></div></div>
<div class="faqs col-md-12"><div id="bContainer2"></div></div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#sContainer{
width:900px; height:500px;
background-color:#ccc;
}
#sContainer2{
width:320px; height:368px;
background-color:#c88;
}
#tContainer{
width:1087px; height:49px;
background-color:#c8c;
margin:0 auto;
}
#bContainer{
width:1087px; height:93px;
background-color:#ccc;
margin:0 auto;
}
#bContainer2{
width:970px; height:329px;
background-color:#c8c;
margin:0 auto;
}
.header{
background-color: #fff;
position: fixed;
top: 0;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.footer{
position: fixed;
bottom: 0;
width: 100%
}
.faqs{
background-color:#0b1140;
}
#accepted_payments img, .faqs img{
margin: 0 auto;
}
/* width:100%
* Header
*/
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
#game_container{
width:90%;
margin:10% auto 10% auto;
}
}
/*Game*/
#game_container{
width:90%;
margin:10% auto 10% auto;
}
#game{
padding-right: 0;
padding-bottom: 100px;
}
/*
* Footer
*/
#accepted_payments {
text-align: center;
width: 100%;
background: #fff;
min-height: 38px;
margin-top: 50px;
vertical-align: top;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
#game_container{
width:100%;
height:500px;
margin:10% auto 100px auto;
clear: both;
}
}
#media (min-width: 992px) {
#game_container{
margin:10% auto 100px auto;
width:100%;
margin:0 auto
}
}
#media (min-width: 1700px) {
#game_container{
margin:6% auto 100px auto;
width:70%;
}
#game{
padding-right: 5%;
}
}
Sorry just noticed the header class was position:fixed
Once I took that out works better now
I'm looking for some CSS help. I am working on my church's website, and I am trying to get the mobile version of my supposedly responsive theme to resize header images. Right now the header image doesn't seem to resize, or at least not completely.
Website: http://www.rochestertrinity.com/kids.html
What I'm hoping to get is to have the header image scale to the exact width of whatever the display size is. So things would look essentially the same on desktop, but on mobile the user would see the entire header image. I've attached a mock up image of what I see now and what I'd like to see.
image of what I see vs what I'd like
I'm not a CSS expert, but I suspect the code that manages this is in one of the following snippets:
/* Tall Header Page */
.tall-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 450px;
padding-top: 50px;
text-align: center;
}
.tall-header-page .banner-wrap .container {
height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
font-size: 70px;
padding-top: 65px;
}
OR
/* Banner */
.banner-wrap {
position: relative;
max-width: 100%;
height: auto;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0);
content: ' ';
}
.banner-wrap .container {
display: table;
overflow-y: hidden;
height: 100%;
}
.banner-wrap .banner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
}
.banner-wrap .banner p {
padding-bottom: 40px;
color: #ffffff;
letter-spacing: .03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
display: inline-block;
}
.banner-wrap .banner .wsite-button {
text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
background: #ff8345;
color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
background: #e56525;
}
I hope someone can help.
Thanks!
UPDATE 2016-04-22
tall-header.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='tall-header-page wsite-theme-light'>
<div class="wrapper">
<div class="paris-header">
<div class="container">
<label class="hamburger"><span></span></label>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
</div><!-- end .container -->
</div><!-- end .header -->
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
</div>
</div>
</div>
<div class="main-wrap">
<div class="container">
<div class="content-wrap">{content}</div>
</div><!-- end container -->
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
In your kids.html you have this, it overwrites your CSS-Code:
<style>
.wsite-background {background-image: url("//cdn1.editmysite.com/uploads/6/5/4/8/65485229/background-images/2036811843.jpg") !important;background-repeat: no-repeat !important;background-position: 50.00% 37.71% !important;background-size: 100% !important;background-color: transparent !important;}
body.wsite-background {background-attachment: fixed !important;}.wsite-background.wsite-custom-background{ background-size: cover !important}
</style>
Delete or Change this part of the code and it works:
.wsite-background.wsite-custom-background {
background-size: cover !important;
}
In your CSS-File you have this media query:
Explanation to media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (max-width: 992px) {
write this line of code in your media query:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% 100% !important; }
Its not perfect, an other solution whould be this, then you have to change the height of the element:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% auto !important; }
or this:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: contain !important; }
Explanation to background-size: http://www.w3schools.com/css/css3_backgrounds.asp
I have recently discovered skeleton.css and it is exactly what I was looking for. I didn't quite understand columns, but the example for buttons did exactly what I wanted as far as stacking elements as the screen narrows. What I have works beautifully, but I am not yet savvy enough with css to make the buttons into columns. The html and css code I have cut down to just what works. Any suggestions as to how to convert buttons to columns would be greatly appreciated.
My code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div>
<a class="button" href="#">Would like column 1</a>
<button>Would like column 2</button>
<input value="Would like column 3" type="submit">
<input value="Would like column 4" type="button">
<input value="Would like column 5" type="button">
</div>
</div>
</body>
</html>
/* css */
.container {
position: relative;
width: 80%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; }
/* For devices larger than 550px */
#media (min-width: 550px) {
.container .columns {
margin-left: 4%; }
}
html {
font-size: 62.5%; }
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, ans-serif;
color: #222; }
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE;
}
.button,
button,
input[type="submit"],
input[type="button"] {
display: inline-block;
background-color: transparent;
border-radius: 4px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
width:188px;
line-height: 38px;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
button {
margin-bottom: 0;
}
.container:after,
.row:after/**,
.u-cf**/ {
content: "";
display: table;
clear: both;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
I decided to play with it myself and replaced the inputs with divs and changed the css accordingly. The code below will produce five equal width columns which will stack in four stages as the screen narrows. It works perfectly for what I need and was pretty simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton2.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div class="column">Column 1<br>More stuff here</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>
</div>
</body>
</html>
.container {
position: relative;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
/* For devices larger than 550px */
#media (min-width: 550px) {
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
}
.column {
display: inline-block;
width:188px;
vertical-align: text-top;
padding-left: 10px;
white-space: nowrap;
box-sizing: border-box;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
I'm confused! I have made a simple webpage to just show an image and some text. It's responsive and it works fine in Firefox, Chrome, Safari and Internet Explorer 10, but not in Internet Explorer 11.
The problem is that it's not responsive, it take a long time to load and it doesn't show the Font Awesome icons in Internet Explorer 11. What could be the reason for this and how could this be fixed? Really preciate some help since I can't find any solution for this when I google around. Thanks!
#import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
a {
text-decoration: none;
color: #2952a1;
}
html
{
overflow-y: scroll;
}
body {
margin:0;
padding:0;
height:100%;
color: #7F7F7F;
height: 100%;
}
#wrapper {
margin-top: 2%;
width: 100%;
height: 100%;
}
#card {
height: 100%;
margin: 0 auto;
width: 80%;
}
#mobileH1 {
display: none;
}
#desktopH1 {
display: block;
}
#leftSide {
height: auto;
float: left;
width: 50%;
}
#rightSide {
padding-top: 5%;
float: right;
width: 49%;
height: auto;
}
#leftSide img {
display: block;
height: auto;
width: 100%;
padding-top: 1%;
margin: 0 auto;
}
h1 {
text-align: left;
font-family: 'Shadows Into Light', cursive;
font-weight: 400;
font-size: 55px;
margin: 0;
}
p {
font-family: 'Dancing Script', cursive;
font-family: 'Shadows Into Light', cursive;
font-size: 28px;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 150px) and (max-width: 768px)
{
#mobileH1 {
display: block;
}
#desktopH1 {
display: none;
}
#card {
width: 90%;
}
#leftSide {
width: 100%;
}
#rightSide {
float: left;
padding-top: 0;
width: 100%;
}
#leftSide img {
width: 80%;
padding-top: 1%;
}
h1 {
font-size: 36px;
text-align: center;
}
p {
font-size: 24px;
}
}
#media only screen and (min-width: 150px) and (max-width: 320px)
{
h1 {
font-size: 28px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Konstkort & affischer</title>
<meta name="description" content="Description text" />
<meta name="viewport" content="width=width-device, initial-scale=1" />
<meta charset="utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="card">
<div id="leftSide">
<h1 id="mobileH1">Headline!</h1>
<img src="bilder/blomma.jpg"/>
</div>
<div id="rightSide">
<h1 id="desktopH1">Headline</h1>
<p>
Text
</p>
<p>
<i class="fa fa-phone fa-lg"></i> Phone number<br>
<i class="fa fa-envelope fa-lg"></i> Mail
</p>
</div>
</div>
</div>
</body>
</html>
It Seems that you have coded proper div tags from your css file and we believe it is not the problem in the code and it might be the reason it get loaded in other browser as well as in Internet Explorer 10. Please try following suggestions to get rid of common issue in "Internet Explorer 11" while it unable to load the webpage.
You might want to turn off Tracking Protection and ActiveX Filtering
in your "Internet Explorer 11" browser (TOOLS option). Tracking Protection and
ActiveX Filtering help protect your privacy by blocking images or
other content that might put your security or privacy at risk.
If the issue persists please try resetting Internet Explorer's security settings
Open the desktop, and then tap or click the Internet Explorer icon on
the taskbar.Tap or click the Tools button Tools button, and then tap
or click Internet options.
On the Security tab, tap or click Default level, and then tap or click
OK.
If none of these suggestions work, you can try resetting Internet Explorer to its default settings.
Hope this helps!
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>