From 5e34db032f99115a7ed17fe75264684e7766563f Mon Sep 17 00:00:00 2001 From: Alexander Sullivan Date: Tue, 30 Jan 2024 12:42:04 -0500 Subject: [PATCH] fix: responsive UI issues for content width --- src/style.css | 27 +++++++++++++++++++++------ src/style.min.css | 2 +- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/style.css b/src/style.css index 5d68207..9091ba8 100644 --- a/src/style.css +++ b/src/style.css @@ -23,6 +23,7 @@ img { margin: auto; text-align: left; width: 1050px; + max-width: 100%; } /** END wrapper **/ @@ -154,13 +155,20 @@ img { /** BEGIN content **/ #content { - border: 1px solid rgb(175, 175, 175)(128, 128, 128, 0.568); - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); - clear: both; - float: left; - font-family: Arial; - width: 676px; + border: 1px solid rgb(175, 175, 175) (128, 128, 128, 0.568); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); + clear: both; + float: left; + font-family: Arial; + width: 676px; +} + +@media screen and (max-width: 1035px) { + #content { + width: 100%; + } } + #content .foot { padding: 25px 8px; } @@ -440,6 +448,13 @@ img { width: 330px; } +@media screen and (max-width: 1035px) { + #sidebar { + margin-top: 1%; + width: 100%; + } +} + #sidebar .box { border: 2px solid #e1e1e1; margin-bottom: 15px; diff --git a/src/style.min.css b/src/style.min.css index c225afb..57ab54d 100644 --- a/src/style.min.css +++ b/src/style.min.css @@ -1 +1 @@ -#header .pages,#header h1,#header nav ul li,#header ul li{float:left}#content .featured .photo,#content .featured .text,#content .postnav ul,#header ul,#sidebar ul{list-style-type:none}#content .atitle,#content .featured .text .readmore,#content .featured h2.title{font-size:.9em;text-transform:uppercase}#sidebar .ads,.archive-title,body{text-align:center}#footer p,#wrapper{margin:auto;text-align:left}body{background:url(images/backgroundnew.gif) repeat-x;color:#000;font:12px Verdana;margin:0;padding:0}img{border:0}.break{clear:both;font-size:0;height:0;width:0}#wrapper{width:1050px}#header{height:200px;padding:0 8px}#header ul{clear:both}#header .pages li{font-size:.7em;font-weight:700;text-transform:uppercase}#header .pages li a{color:#fff;display:block;padding:8px 10px;text-decoration:none}#content .details a:hover,#footer a:hover,#header .pages li a:hover{text-decoration:underline}#header nav ul li:hover>ul{display:block}#header nav ul{background:-moz-linear-gradient;background:-webkit-linear-gradient;box-shadow:0 0 9px rgba (0,0,0,.15);display:inline-table;list-style:none;padding:0 20px;position:relative}#header nav ul li:hover{background:-moz-linear-gradient(top,#4f5964 0,#5f6975 40%);background:-webkit-linear-gradient(top,#4f5964 0,#5f6975 40%);background:linear-gradient(top,#4f5964 0,#5f6975 40%)}#header nav ul li a{color:#000;display:block;padding:25px 40px;text-decoration:none}#header nav ul ul{display:none;background:#5f6975;border-radius:0;padding:0;position:absolute;top:100%}#content .featured .thumb,#content .post img,.articleBody img{background-color:#f2f2f1;border:1px solid #e9e9e9;padding:5px}#header nav ul ul li{border-bottom:1px solid #575f6a;border-top:1px solid #6b727c;float:none;position:relative}#header nav ul ul li a{color:#fff;padding:15px 40px}#header nav ul ul ul{left:100%;position:absolute;top:0}#header h1{clear:both;padding:35px 0 40px}#header .ad{float:right;padding-top:30px}#body{padding:10px 0}.articleBody{margin-left:3%;margin-right:3%}.articleBody img{vertical-align:middle;width:100%}#content{border:1px solid #afafaf;box-shadow:0 0 10px rgba(0,0,0,.5);clear:both;float:left;font-family:Arial;width:676px}#content .foot{padding:25px 8px}#content .atitle,#content .featured h2.title,#sidebar h2{font-weight:400;padding:5px 8px}#content .atitle{float:left;margin:10px 30px}#content .featured{padding:5px 30px 10px}#content .featured h2.title{background-color:#212121;color:#fff;float:left;margin-bottom:10px}#content .featured .thumb{clear:both;height:315px;width:590px}#content .featured .b{height:315px;overflow:hidden;position:relative;width:589px}#content .photo li{left:0;position:absolute;top:0;z-index:0}#content .photo li.first{z-index:2}#content .photo li img{width:589px}#content .featured .text li{background:url(images/shade.png);color:#fff;font-family:Verdana;height:285px;padding:15px;position:absolute;right:-270px;top:0;width:230px;z-index:4}#content .featured .text li.first{right:0}#content .featured .text h2{font-size:1.6em;margin-bottom:15px}#content .featured .text p,#content .post p{line-height:1.6em;margin-bottom:15px}#content .featured .text a,#footer a{color:#fff;text-decoration:none}#content .featured .text .readmore{font-weight:700}#content .post{border-top:1px solid #e9e9e9;clear:both;margin:0 30px}#content .first{border-top:0}#content .post .l{float:left;padding:15px 0}#content .post .r{float:right;padding:15px 0;width:430px}#content .post h2{font-size:1.8em;font-weight:400;margin-bottom:15px}#content .post h2 a,#sidebar ul li a{color:#191919;text-decoration:none}#content .details{float:left;font-size:.85em;margin-bottom:0!important;text-transform:uppercase}#content .details a{color:#191919;margin:0 5px;text-decoration:none}#content .comments a{background-color:#212121;color:#fff;display:block;font-family:Verdana;font-size:.9em;padding:2px 6px;text-decoration:none}#content .single li,#sidebar ul li{line-height:1.5em;padding:2px 0}#content .postnav{clear:both;float:right;padding:0 20px}#content .postnav ul li{float:left;font-family:Arial;padding:0 4px}#content .postnav ul li a{border:1px solid #e1e1e1;color:#4f4f4f;display:block;padding:4px 8px;text-decoration:none}#content .postnav ul li a:hover{border-color:#fff}#content .single{padding:10px 30px}#content .single h2{font-size:1.4em;margin-bottom:10px;text-transform:none}#content .single p{line-height:1.5em;margin-bottom:10px}#content .single ol,#content .single ul{list-style-position:inside;margin-bottom:10px}#content .single blockquote{background-color:#eee;border-color:#e0e0e0;border-style:solid;border-width:1px 0;margin-bottom:10px;padding:10px 10px 5px}#footer,#sidebar .search button,#sidebar h2{background-color:#212121;color:#fff}#content .single h3,#content .single h4,#content .single h5,#content .single h6{font-size:1.2em;margin-bottom:5px}.archive-title{color:#000;text-decoration:none}.archive-link{text-decoration:none}.archive-display{border:1px solid rgba(0,0,0,.342);margin:auto auto 2%;max-width:30%!important;min-width:200px}.archive-display img{margin:auto;width:100%}#sidebar{float:right;width:330px}#sidebar .box{border:2px solid #e1e1e1;margin-bottom:15px;padding:10px}#sidebar h2{font-size:.9em;margin-bottom:10px;text-transform:uppercase;width:130px}#sidebar ul li{border-bottom:1px solid #e9e9e9}#sidebar .ads{margin-bottom:10px}#sidebar .ads img{margin:4px}#sidebar .search{border:2px solid #e1e1e1;height:29px;margin-bottom:10px}#sidebar .search input{border:0;float:left;margin:6px 4px;width:220px}#sidebar .search button{border:0;float:right;font-size:.8em;font-weight:700;height:29px;text-transform:uppercase;width:38px}#footer{clear:both}#footer p{font-size:.9em;padding:15px 0;width:940px} \ No newline at end of file +#header .pages,#header h1,#header nav ul li,#header ul li{float:left}#content .featured .photo,#content .featured .text,#content .postnav ul,#header ul,#sidebar ul{list-style-type:none}#content .atitle,#content .featured .text .readmore,#content .featured h2.title{font-size:.9em;text-transform:uppercase}#sidebar .ads,.archive-title,body{text-align:center}#footer p,#wrapper{margin:auto;text-align:left}body{background:url(images/backgroundnew.gif) repeat-x;color:#000;font:12px Verdana;margin:0;padding:0}img{border:0}.break{clear:both;font-size:0;height:0;width:0}#wrapper{width:1050px;max-width:100%}#header{height:200px;padding:0 8px}#header ul{clear:both}#header .pages li{font-size:.7em;font-weight:700;text-transform:uppercase}#header .pages li a{color:#fff;display:block;padding:8px 10px;text-decoration:none}#content .details a:hover,#footer a:hover,#header .pages li a:hover{text-decoration:underline}#header nav ul li:hover>ul{display:block}#header nav ul{background:-moz-linear-gradient;background:-webkit-linear-gradient;box-shadow:0 0 9px rgba (0,0,0,.15);display:inline-table;list-style:none;padding:0 20px;position:relative}#header nav ul li:hover{background:-moz-linear-gradient(top,#4f5964 0,#5f6975 40%);background:-webkit-linear-gradient(top,#4f5964 0,#5f6975 40%);background:linear-gradient(top,#4f5964 0,#5f6975 40%)}#header nav ul li a{color:#000;display:block;padding:25px 40px;text-decoration:none}#header nav ul ul{display:none;background:#5f6975;border-radius:0;padding:0;position:absolute;top:100%}#content .featured .thumb,#content .post img,.articleBody img{background-color:#f2f2f1;border:1px solid #e9e9e9;padding:5px}#header nav ul ul li{border-bottom:1px solid #575f6a;border-top:1px solid #6b727c;float:none;position:relative}#header nav ul ul li a{color:#fff;padding:15px 40px}#header nav ul ul ul{left:100%;position:absolute;top:0}#header h1{clear:both;padding:35px 0 40px}#header .ad{float:right;padding-top:30px}#body{padding:10px 0}.articleBody{margin-left:3%;margin-right:3%}.articleBody img{vertical-align:middle;width:100%}#content{border:1px solid #afafaf;box-shadow:0 0 10px rgba(0,0,0,.5);clear:both;float:left;font-family:Arial;width:676px}#content .foot{padding:25px 8px}#content .atitle,#content .featured h2.title,#sidebar h2{font-weight:400;padding:5px 8px}#content .atitle{float:left;margin:10px 30px}#content .featured{padding:5px 30px 10px}#content .featured h2.title{background-color:#212121;color:#fff;float:left;margin-bottom:10px}#content .featured .thumb{clear:both;height:315px;width:590px}#content .featured .b{height:315px;overflow:hidden;position:relative;width:589px}#content .photo li{left:0;position:absolute;top:0;z-index:0}#content .photo li.first{z-index:2}#content .photo li img{width:589px}#content .featured .text li{background:url(images/shade.png);color:#fff;font-family:Verdana;height:285px;padding:15px;position:absolute;right:-270px;top:0;width:230px;z-index:4}#content .featured .text li.first{right:0}#content .featured .text h2{font-size:1.6em;margin-bottom:15px}#content .featured .text p,#content .post p{line-height:1.6em;margin-bottom:15px}#content .featured .text a,#footer a{color:#fff;text-decoration:none}#content .featured .text .readmore{font-weight:700}#content .post{border-top:1px solid #e9e9e9;clear:both;margin:0 30px}#content .first{border-top:0}#content .post .l{float:left;padding:15px 0}#content .post .r{float:right;padding:15px 0;width:430px}#content .post h2{font-size:1.8em;font-weight:400;margin-bottom:15px}#content .post h2 a,#sidebar ul li a{color:#191919;text-decoration:none}#content .details{float:left;font-size:.85em;margin-bottom:0!important;text-transform:uppercase}#content .details a{color:#191919;margin:0 5px;text-decoration:none}#content .comments a{background-color:#212121;color:#fff;display:block;font-family:Verdana;font-size:.9em;padding:2px 6px;text-decoration:none}#content .single li,#sidebar ul li{line-height:1.5em;padding:2px 0}#content .postnav{clear:both;float:right;padding:0 20px}#content .postnav ul li{float:left;font-family:Arial;padding:0 4px}#content .postnav ul li a{border:1px solid #e1e1e1;color:#4f4f4f;display:block;padding:4px 8px;text-decoration:none}#content .postnav ul li a:hover{border-color:#fff}#content .single{padding:10px 30px}#content .single h2{font-size:1.4em;margin-bottom:10px;text-transform:none}#content .single p{line-height:1.5em;margin-bottom:10px}#content .single ol,#content .single ul{list-style-position:inside;margin-bottom:10px}#content .single blockquote{background-color:#eee;border-color:#e0e0e0;border-style:solid;border-width:1px 0;margin-bottom:10px;padding:10px 10px 5px}#footer,#sidebar .search button,#sidebar h2{background-color:#212121;color:#fff}#content .single h3,#content .single h4,#content .single h5,#content .single h6{font-size:1.2em;margin-bottom:5px}.archive-title{color:#000;text-decoration:none}.archive-link{text-decoration:none}.archive-display{border:1px solid rgba(0,0,0,.342);margin:auto auto 2%;max-width:30%!important;min-width:200px}.archive-display img{margin:auto;width:100%}#sidebar{float:right;width:330px}@media screen and (max-width:1035px){#content{width:100%}#sidebar{margin-top:1%;width:100%}}#sidebar .box{border:2px solid #e1e1e1;margin-bottom:15px;padding:10px}#sidebar h2{font-size:.9em;margin-bottom:10px;text-transform:uppercase;width:130px}#sidebar ul li{border-bottom:1px solid #e9e9e9}#sidebar .ads{margin-bottom:10px}#sidebar .ads img{margin:4px}#sidebar .search{border:2px solid #e1e1e1;height:29px;margin-bottom:10px}#sidebar .search input{border:0;float:left;margin:6px 4px;width:220px}#sidebar .search button{border:0;float:right;font-size:.8em;font-weight:700;height:29px;text-transform:uppercase;width:38px}#footer{clear:both}#footer p{font-size:.9em;padding:15px 0;width:940px} \ No newline at end of file