Jili x apk download.REGISTER NOW GET FREE 888 PESOS REWARDS!

Resolved

(@starwag)

It has recently come to my attention that the website I have been developing does not look well on Mozilla. I know this is a common problem, but can’t seem to troubleshoot it alone. I have updated Mozilla, checked the CSS language I used, flushed the cache, and made sure all links are correct. The site looks great everywhere else, just not here. Looking at it, I would say there is something about the CSS that isn’t translating, but I cannot discover what it would be. If anyone has any suggestions, I would be very grateful. Thanks in advance.

I am including the whole CSS below here for ease of viewing. Thanks again.

body{
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow-y: scroll;
}

input[name=t] {
	width: 0;
	height: 0;
}

		#whicon {
		margin: 0; 
		padding: 0; 
		position: relative; 
		width: 10%; 
	}

	.minibutton {
		width: 15%; 
		height: auto; 
		margin-left: 5%; 
		display: inline-block;
	}

	#buttonbox {
		width: 88%; 
		height: 20%; 
		margin: 8%;
	}
	

#searchpackage {
	width: 0;
	height: 0;
}

#thrmenu {
	width: 0;
	height: 0;
}
#a3 {
	width: 0;
	height: 0;
}

#b3{
	width: 0;
	height: 0;
}
#c3 {
	width: 0;
	height: 0;
}
#d3{
	width: 0;
	height: 0;
}
#mini3{
	width: 0;
	height: 0;
}
#cellsearchbox {
	width: 0;
	height: 0;
	display: flex;
}
#cellblogcontainer {
	width: 0;
	height: 0;
}

#cellrightcontainer{
	width: 0;
	height: 0;
}
#logobox{
	position: absolute;
	z-index: 5000;
	height: 100vh;
	width: calc(.678*(100%-20vh));
	margin: 0;
	padding: 0;
	overflow: visible;
}

#logo {
	margin: 25%;
	margin-top: 25vh;
	margin-bottom: auto;
	width: 50%;
	height: 50%;
	background-position: center;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/05/plcfin.png");
	background-size: contain;
	background-repeat: no-repeat;
	overflow: visible;
}
#logobrace {
	width: 100%;
	height: 15vh;
	margin-bottom: 0;
}
a {
	text-decoration: none;
	color: white;
}
#sidebar{
	width: 20vh;
	height: 100vh;
	position: fixed;
	float: left;
	margin: 0;
}
#mySidenav {
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/05/gardfilm1.jpg");
	background-position: center;
	background-size: cover;
}

#center{
	width: calc(.678*(100%-20vh));
	min-height: 100vh;
	height: auto;
	float: left;
	margin-left: 20vh;
	margin-right: 0;
	background-color:  #e0eef9;
}

#art{
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	float: left;

}

#centerleft{
	width: 50%;
	height: 100%;
	float: left;
}
#tlc{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/home.jpg");
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
#blc{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/2009-to-2011-925.jpg");
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
#centerright{
	width: 50%;
	height: 100%;
	float: right;
}
#trc{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/March-2008-to-Nov-2009-600.jpg");
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
#brc{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/20160914_182441-e1548792538838.jpg");
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.titler {
	height: 100%;
	width: 58%;
	position: static;
	float: right;
	overflow: visible;
	margin: 4%;
}
.titlel  {
	height: 100%;
	width: 58%;
	position: static;
	float: left;
	overflow: visible;
	margin: 4%;
}
#section1{
	background-color: #e3b99b;
}
#title1{
}
#section2{
	background-color:   #b3e7ff;
}
#title2{
}

#section3{
	background-color: #c8ac6a;
}
#title3{
}
#section4{
	background-color: #badeba;
}
#title4{
}

#section5{
	background-color:   #e3b99b;
}
#title5{
}

#section6{
	background-color: #b3e7ff;
}
#title6{
}

#section7{
	background-color: #c8ac6a;
}

#title7{
}
#section8{
	background-color: #a5cda5;
}
#title8{
}
#extra {
	background-color:  #efd5c3;
}
#extra2 {
	background-color: #ccefff;
}
#extra3 {
	background-color:  #ddcba2;
}
#extra4 {
	background-color: #cde7cd;
}
#extra5{
	background-color: #efd5c3;
}
#extra6 {
	background-color:  #ccefff;
}

#extra7{
	background-color: #ddcba2;
}
#extra8 {
	background-color: #d8f3d8;
}

.headlinesection {
	color: white;
	text-align: center;
	font-family: "Century Gothic";
	font-size: 38px;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 10px;
}
.summarysection {
	color: white;
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 18px;
	font-weight: normal;
	width: 96%;
}

.sectioncommon {
	margin: 0;
	padding: 0;
	float: left;
	position: static;
	height: calc((1 / 3) * 100vh);
	width: 100%;
	overflow: hidden;
}
.sectioncommon2 {
	color: white;
	height: auto;
	width: 100%;
	margin: 0;
	display: none;
	position: relative;
	min-height: calc(.5*(1 / 3) * 100vh);
	text-align: center;
	line-height: 2;
	padding: 2%;
	font-family: "Times New Roman", Times, serif;
	float: left;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
.extracommon {
	color: white;
	height: auto;
	width: 96%;
	margin: 0;
	display: none;
	position: relative;
	min-height: calc(.5*(1 / 3) * 100vh);
	text-align: center;
	line-height: 2;
	padding: 2%;
	font-family: "Times New Roman", Times, serif;
	float: left;

	
}
.up {
  background: none;
  border: solid;
  border-width: 1px;
  border-color: white;
  color: white;
  text-align: center;
  font-size: 16px;
  opacity: .6;
  transition: 0.3s;
}

.up:hover {
	opacity: 1;
}

img {
	max-width: 100%;
}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.regimg {
	position: static;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	
}

h1 {
	color: white;
	text-align: center;
	font-family: "Times New Roman";
	font-style: italic;
	font-size: 3em;
	font-weight: normal;
}

h2 {
	color: white;
	text-align: center;
	font-family: "Century Gothic";
	font-size: 2.2em;
	font-weight: normal;
	line-height: 0;
}
h3 {

	color: white;
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 1.2em;
	font-weight: normal;
}

hr {
	border-style: solid;
	border-color: white;
	border-width: .25px;
	margin: 2%;
	
}

.sectioniR {
		  width: 33%;
		  height: 100%;
		  overflow: visible;
		  background-position: center;
		  background-size: cover;
		  margin:0;
		  padding: 0;
		  float: right;
}
.sectioniL{
		  width: 33%;
		  height: 100%;
		  overflow: visible;
		  background-position: center;
		  background-size: cover;
		  margin:0;
		  padding: 0;
		  float: left;
}
#gardi1{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0496-e1548540459971.jpg");
}
#gardi2{

	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2016/07/garden-e1548541519388.jpg");
}
#gardi3{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/100_6830-e1548548685236.jpg");
}
#gardi4{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0204-e1548540633451.jpg");
}
#gardi5{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0150-e1548540652835.jpg");
}
#gardi6{		
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0753-e1548540602371.jpg");
}
#gardi7{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0770-e1548540586926.jpg");
}
#gardi8{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0786-e1548540526632.jpg");
}

#homei1{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/100_6658-e1548699759483.jpg");
}
#homei2{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0597-e1548553612576.jpg");
}
#homei3{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/to-October-29th-106-e1548549725497.jpg");
}
#homei4{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0424-e1548699370781.jpg");
}
#homei5{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0079-e1548540508331.jpg");
}
#homei6{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0562-e1548779079214.jpg");
}
#homei7{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/2017-010-e1548782642863.jpg");
}
#homei8{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/Dobby-day-of-Hannahs-wedding-2-e1548547728704.jpg");
}

#sheepi1{

	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2016/07/lily-apple-blossoms-e1548540690612.jpg");
		
}
#sheepi2{

	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2016/07/elsie-health-e1548541457694.jpg");
}
#sheepi3{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/20161025_175159-e1548784930184.jpg");
}

#chicki1{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2016/07/chickens-e1548541535131.jpg");
}
#chicki2{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/DSC_0718-e1548553082182.jpg");
}
#chicki3{
	      background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/01/100_5588-e1548548053581.jpg");
}

#topi{
	padding:0;
	position: relative;
	float: left;
	margin-right: 0;
	height: calc((1/3) * 100vh);
	width: auto;
	border: none;
}

#middlei{
	padding:0;
	position: static;
	float: right;
	margin-left: 0;
	margin-right: 0;
	height: calc((1/3) * 100vh);
	width:auto;
	border: none;
}
#bottomi{
	padding:0;
	position: static;
	float: left;
	margin-right: 0;
	height: calc((1/3) * 100vh);
	width:auto;
	border: none;
}

header {
	width: 100%;
	height: 75vh;
	float: left;
	margin-bottom: 4%;
	background-color: #bedbf3;
}
#smallheader {
	width: 100%;
	height: 20vh;
	float: left;
	margin-bottom: 4%;
	background-color: lightblue;
	text-align: center;
	font-family: Times New Roman;
	font-size: 3em;
	font-style: italic;
	color: white;
	padding: 4% 0 0 0;
}
#special {
	width: 100%;
	height: 25vh;
	float: left;
	margin-bottom: 4%;
	background-color: lightblue;
}

#excerptbox {
	width: 40%;
	height: 80%;
	float: left;
	font-size: 30px;
	font-family: Times New Roman;
	font-style: italic;
	color: white;
	text-align: center;
	padding: 10% 5% 10% 5%;
}
#aboutbox {
	width: 40%;
	height: 80%;
	float: left;
	font-size: 4.5em;
	font-family: Times New Roman;
	line-height: 0;
	font-style: italic;
	color: white;
	text-align: center;
	padding: 10% 5% 10% 5%;
}

#subs {
	float: left;
	font-size: 17px;
	font-family: Times New Roman;
	font-style: italic;
	color: white;
	text-align: center;
	width: 100%;
}
#titletextbox {
	width: 100%;
	height: 20%;
	float: left;
	font-size: 4em;
	font-family: Times New Roman;
	font-style: italic;
	color: white;
	text-align: center;
	padding: 30% 0 0 0;
}
#borderboxtext {
	border-style: solid;
	border-width: 2%;
	border-color: white;
	height: 60vh;
	width: calc(.28*(100%-20vh));
	font-size: 1em;
	color: white;
	font-style: italic;
	font-family: Times New Roman;
	z-index: 600;
	float: right;
	margin-left: calc(.37*(100%-20vh));
	margin-top: 4%;
	position: absolute;
}

#headpic {
	width: 50%;
	height: 100%;
	float: right;
	overflow: hidden;
}
#date {
	font-size: 14px;
	font-family: Times New Roman;
	padding: 2% 2% 2% 0;
	width:  96%;
	height: auto;
	line-height: 1;
	float: left;
}

#post {
	width: 84%;
	height: auto;
	min-height: 60vh;
	padding: 8%;
	font-family: Georgia, Times New Roman, serif;
	letter-spacing: normal;
	word-spacing: normal;
	font-size: 17px;
    line-height: 1.6em;
	background: none;
	
}
#comments {
	width: 64%;
	height: auto;
	min-height: 20vh;
	padding: 8%;
	background-color: #d3e6f7;
	margin-top: 8%;
	margin-bottom: 8%;
	margin-right: 10%;
	margin-left: 10%;
}

#art{
	height: 100vh;
	width: 100%;
	margin: 0;
	margin-left: 0;
	position: static;
	float: left;
	background: none;
	color:black;
	padding: 0;
	
}
#centerleft {
	height: 100%;
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
}

#centerright{
	height: 100%;
	width: 50%;
	float: right;
	margin: 0;
	padding: 0;

}

.postcontainer {
	min-height: 40vh;
	height: auto;
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
	overflow: hidden;
	border-bottom-width: .5px;
	border-bottom-color: lightgray;
	border-bottom-style: solid;
	color: white;
	padding-bottom: 2%;
}

.moreblock {
	float: right;
	width: 5%;
	width: 25%;
	height: 100%;
	line-height: 2em;
	padding-left: 7%;
	font-size: 14px;
}
.topblock {
	font-family: Century Gothic;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: .75vh;
	height: 15%;
	border-bottom: solid;
	border-bottom-color: white;
	border-bottom-width: .5px;
	overflow: hidden;
}

.block {
	float: left;
	display: inline-block;
	position: relative;
}

.date {
	float: left;
	height: 10%;
	width: 100%;
	position: relative;
	font-size: 8px;
}
.titleblock {
	width: 67.5%;
	float: left;
	height: 100%;
	border-right: solid;
	border-right-color: white;
	border-right-width: .5px;
	line-height: 2em;
	font-size: 14px;
}
.titleblock a {
	text-decoration: none;
	color: white;
}
.thumb {
	width: auto;
	height: 60%;
	background-image: url();
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#house {
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
#chickens{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-position: center;
	background-size: cover;
	overflow: hidden;

}
#sheep{
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
#garden{	
	height: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-size: contain;
	background-repeat: repeat-x;
}

footer {
	width: 96%;
	height: 15vh;
	padding: 2%;
	background-color: lightgray;
	font-size: 2.5vh;
	text-align: center;
	margin-bottom: 0;
	float: left;
}

#rightcontainer {
	height: 100vh;
	width: calc( 100% - 20vh - (.67*(100%-20vh)));
	position: fixed;
	overflow: hidden;
	background-color: gray;
	margin-left: calc((.67*(100%-20vh)) + 20vh);
	float: left;
	margin-right: 0;

}

#searchbox{
	height: auto;
	width: 100%;
	background-color: lightgray;
	padding: 6% 10% 6% 10%;
	border: solid;
	border-color: gray;
	border-width: .5px;
	
	
}
#backbox {
	height: auto;
	width: 100%;
	background-color: lightgray;
	padding: 6% 10% 6% 10%;
	border: solid;
	border-color: gray;
	border-width: .5px;
	display: none;
	margin: 0;
	
}

#back {
	width: 20px;
	height: 20px;
	border: solid;
	border-color: gray;
	border-width: .5px;
	color: white;
	font-size: .8em;
	background-color: none;
	text-align: center;
	padding: 1px 1px 1px 1px;
	opacity: 1;
	text-shadow: -.2px -1px 0 gray,
		.5px -1px 0 gray,
		-.1px 1px 0 gray,
		.1px 1px 0 gray;
	float: left;
	margin-right: 5px;
}

#down {
	position: fixed;
	margin-top: 80vh;
	z-index: 5000;
	margin-left: calc(.5*((100% - 20vh - (.678*(100%-20vh)))));
	width: 20px;
	height: 20px;
	border: solid;
	border-color: gray;
	border-width: .5px;
	color: white;
	font-size: .8em;
	background-color: lightgray;
	text-align: center;
	padding: 2px 2px 2px 2px;
	opacity: .8;
	text-shadow: -.2px -1px 0 gray,
		.5px -1px 0 gray,
		-.1px 1px 0 gray,
		.1px 1px 0 gray;
}

#up{
	position: fixed;
	margin-top: 2vh;
	z-index: 5000;
	margin-left: calc(.5*((100% - 20vh - (.678*(100%-20vh)))));
	width: 20px;
	height: 20px;
	border: solid;
	border-color: gray;
	border-width: .5px;
	color: white;
	font-size: .8em;
	background-color: lightgray;
	text-align: center;
	padding: 2px 2px 2px 2px;
	opacity: .8;
	text-shadow: -.2px -1px 0 gray,
		.5px -1px 0 gray,
		-.1px 1px 0 gray,
		.1px 1px 0 gray;

}

#up:hover {
	opacity: 1;
}
#down:hover {
	opacity: 1;
}

#blogcontainer{
	width: 100%;
	height: 90%;
	float: left;
	overflow: hidden;
	padding: 0;
	position: static;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

 

#top {
	height: 25%;
	width: 100%;
	background: #e3f9fb;
}

#menucontainer {
	height: 80%;
	width: 80%;
	margin: 10%;
	background: none;
	border: solid white;
	border-width: 1px;
	display: inline-block;
	font-family: Century Gothic;
	color: gray;
	text-align: center;
	letter-spacing: 8px;
	font-size: 2.5vh;
	

}

.bar {
	width: 80%;
	height: 10%;
	background-color: gray;
	margin: 10% 0;
	margin-left: 10%;

}

#menucontainer:hover {
	background-color: #dcefff;
}

#middle{
	height: 50%;
	width: 100%;
	background: none;
	background-size: cover;
}
#bottom{
	height: 25%;
	width: 100%;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/05/aout.jpg");
	background-position: center;
	background-size: contain;
	background-repeat: none;
}
#bottom:hover {
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/hellomom.jpg")
}

#bottomtext{
	margin-top:5%;
	color: white;
	text-align: center;
	font-family: Times New Roman;
	font-size: 1.5em;
}

#buttonup{
	width: 15px;
	height: 15px;
	background: none;
	color: white;
	z-index: 15;
	margin-left: 20vh;
	margin-top: 5vh;
	position: fixed;
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background: none;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenav a {
    padding: 8px 0 8px 0;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#spring{
	display: block;
	width: 80%;
	position: relative;
	float: left;
	margin: 5%;
	margin-left: 10%;
	min-height: 180px;
	height: auto;
	border: solid;
	border-color: #FFF;
	background: none;
	padding: 2%;
	font-family: "Century Gothic";
	
}
#summer{
	display: block;
	width: 80%;
	position: relative;
	float: left;
	margin: 5%;
	margin-left: 10%;
	min-height: 180px;
	height: auto;
	border: solid;
	border-color: #FFF;
	background: none;
	padding: 2%;
	font-family: "Century Gothic";
	
}
#autumn{
	display: block;
	width: 80%;
	position: relative;
	float: left;
	margin: 5%;
	margin-left: 10%;
	min-height: 180px;
	height: auto;
	border: solid;
	border-color: #FFF;
	background: none;
	padding: 2%;
	font-family: "Century Gothic";
	
}
#winter{
	display: block;
	width: 80%;
	position: relative;
	float: left;
	margin: 5%;
	margin-left: 10%;
	min-height: 180px;
	height: auto;
	border: solid;
	border-color: #FFF;
	background: none;
	padding: 2%;
	font-family: "Century Gothic";
	
}
iframe{
	padding: 2%;
	max-height: 157px;
	width: 280px;
}

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background: none;
	border: none;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}

	.comment-author .avatar {
		height: 40px;
		width: auto;
	}
@media screen and (max-width: 768px) and (min-width: 601px) and (orientation: landscape) {
	img.attachment-large.size-large.wp-post-image {
		height: 100%;
		width: 100%;
	}
	

	
}

@media screen and (max-width: 768px) and (min-width: 601px) and (orientation: portrait) {
	
	.comment-author .avatar {
		height: 25px;
		width: auto;
	}
   #sidebar{
	height: 25vh;
    width: 100%;
	position: absolute;
	float: left;
	margin: 0;
}

    #mySidenav {
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/gardteal.jpg");
	background-position: center;
	background-size: cover;
}
	#comments {
		background-color: #bedbf3;
	}
  #center{
	width: 100%;
	  min-height: 100vh;
	height: auto;
	margin-left: 0;
	margin-top: 35vh;
	background-color: white;
	}

	#logobox{
		width: 100%;
	}
	#logo {
		margin-left: 25vw;
	}
    header {
	background-color: #bedbf3;
	height: auto;
	width: 100%;
	overflow-y: hidden;
	}
	#comments {
		background-color: #bedbf3;
	}

    #top {
	height: 0%;
	width: 0%;
	background: #e3f9fb;
	}

    #menucontainer {
	height: 0%;
	width: 0%;
	margin: 0%;
	background: none;
	border: solid white;
	border-width: 0px;
	display: inline-block;
	font-family: Century Gothic;
	color: gray;
	text-align: center;
	letter-spacing: 0px;
	font-size: 0vh;
}

.bar {
	width: 50px;
	height: 5px;
	background-color: white;
	margin: 10px;
}

#menucontainer:hover {
	background-color: #dcefff;
}

    #middle{
	height: 100%;
	width: 75%;
	float: right;
	margin-left: 25%;
	background: none;
	background-size: cover;
	}

    #bottom{
	height: 100%;
	width: 25%;
	position: absolute;
	float: left;
	background-color: #c4e3ed;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/hellomom.jpg");
	background-position: center;
	background-size: contain;
	background-repeat: none;
	}

    #bottomfilter{
	background-color: #c4e3ed;
	opacity: .5;
	height: 100%;
	width: 100%;
}

    #bottomtext{
	margin-top:5%;
	color: white;
	text-align: center;
	font-family: Times New Roman;
	font-size: 1.5em;
}
	
input[name=t] {
	margin: 0; 
	padding: 0; 
	position: relative; 
	width: 88%;
}
	#whicon {
		margin: 0; 
		padding: 0; 
		position: relative; 
		width: 10%; 
	}

	.minibutton {
		width: 15%; 
		height: auto; 
		margin-left: 5%; 
		display: inline-block;
	}

	#buttonbox {
		width: 88%; 
		height: 20%; 
		margin: 8%;
	}
	
#searchpackage {
	background-color: white; 
	width: 47%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}

#thrmenu {
	background: none; 
	height: 100%; 
	width: 10%; 
	margin-left: 2%; 
	display: inline-block; 
}
#a3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/yt_logo_mono_dark-e1559148736342.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 0; 
	display: inline-block;
}
#b3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/instalogo.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
	}
#c3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/badgeRGB-white.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#d3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/mailsym.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#mini3{
	background: none; 
	width: 26%; 
	height: 100%; 
	margin-left: 6%; 
	margin-right: 2%; 
	display: inline-block;
}
	.sectioncommon {}
	.extracommon {}
	.titler {
	}
		.titlel {
	}
	 
.headlinesection {
	font-size: 26px;
}
.summarysection {
	font-size: 16px;
}
	
	#headpic {
		margin: 0;
	width: 100%;
		height:  auto;
	}
	#titletextbox {
		font-size: 56px;
		margin-top: 25%;
		padding: 0;
	}
	#subs {
		font-size: 20px;
		margin-top: 2%;
		padding: 0;
	}
	#borderboxtext{
		width: calc(100% - 10vh);
		height: 60vh;
		margin: 5vh;
		z-index: 600;
		border: none;
		background: none;
	}
	#excerptbox{
		width: 80%;
		background: none;
		height: 15vh;
		overflow: hidden;
		padding: 3% 5% 3% 5%;
		margin: 5%;
		font-size: 20px;
		z-index: 700;
		border: .5px solid white;
	}
	
	#up {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}
	
	#down {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}

#cellsearchbox{
	height: auto;
	max-height: 10vh;
	width: 100%;
	position: absolute;
	margin-top: 25vh;
	background-color: lightgray;
	display: flex;
	padding: 2%;
	color: white;
}
	
	#cellblogcontainer{
	width: 2000%;
	height: 100%;
	float: left;
	padding: 0;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}
	
.moreblock {
	float: right;
	width: 5%;
	width: 25%;
	height: 100%;
	line-height: 1rem;
	font-size: .5em;
	padding-left: 7%;

}
.topblock {
	font-family: Century Gothic;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 1rem;
	height: 15%;
	border-bottom: solid;
	border-bottom-color: white;
	border-bottom-width: .5px;
	overflow: hidden;
}

.block {
	float: left;
	display: inline-block;
	position: relative;
	font-size: .8rem;
}

.date {
	float: left;
	height: 10%;
	width: 100%;
	position: relative;
	font-size: .6rem;
}
.titleblock {
	width: 67.5%;
	float: left;
	height: 100%;
	border-right: solid;
	border-right-color: white;
	border-right-width: .5px;
	line-height: 2rem;
	font-size: 1rem;
}

	.postcontainer {
	height: auto;
	width: 50vw;
	padding: 0;
	overflow: hidden;
	border-width: .5px;
	border-color: lightgray;
	border-style: solid;
	color: white;
	position: relative;
	float: left;
		margin-left: 5vw;
		margin-top: 2vh;
		margin-bottom: 2vh;
}
	#rightcontainer {
		width: 0;
		height: 0;
	}
	#blogcontainer {
		width: 0;
		height: 0;
	}

	#cellrightcontainer {
	height: auto;
	width: 100%;
	overflow-y: hidden;
    display: inline-block;
	background-color: gray;
	margin-left: 0;
	}
	#searchbox {
		width: 0;
		height: 0;
	}
input[type=text] {
  width: 10%;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: lightgray;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 12px 12px 12px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 960%;
   background-position: 95%;
	background-color: white;
}
	
	footer {
	width: 96%;
	height: 15vh;
	padding: 2%;
	background-color: lightgray;
	font-size: 2.5vh;
	text-align: center;
	margin-bottom: 0;
	float: left;
}

}
 
@media screen and (max-width: 600px) and (min-width: 481px){
		
	.comment-author .avatar {
		height: 20px;
		width: auto;
	}   
	
	#sidebar{
	height: 25vh;
    width: 100%;
	position: absolute;
	float: left;
	margin: 0;
}

    #mySidenav {
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/gardteal.jpg");
	background-position: center;
	background-size: cover;
}

	#comments {
		background-color: #bedbf3;
	}
	
  #center{
	width: 100%;
	  min-height: 100vh;
	height: auto;
	margin-left: 0;
	margin-top: 35vh;
	background-color: white;
	}

	#logobox{
		width: 100%;
	}
	#logo {
		margin-left: 25vw;
	}
    header {
	background-color:#bedbf3;
	height: auto;
	width: 100%;
	overflow-y: hidden;
	}

    #top {
	height: 0%;
	width: 0%;
	background: #e3f9fb;
	}

    #menucontainer {
	height: 0%;
	width: 0%;
	margin: 0%;
	background: none;
	border: solid white;
	border-width: 0px;
	display: inline-block;
	font-family: Century Gothic;
	color: gray;
	text-align: center;
	letter-spacing: 0px;
	font-size: 0vh;
}

.bar {
	width: 80%;
	height: 10%;
	background-color: gray;
	margin: 10% 0;
	margin-left: 10%;
}

#menucontainer:hover {
	background-color: #dcefff;
}

    #middle{
	height: 100%;
	width: 75%;
	float: right;
	margin-left: 25%;
	background: none;
	background-size: cover;
	}

    #bottom{
	height: 100%;
	width: 25%;
	position: absolute;
	float: left;
	background-color: #c4e3ed;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/hellomom.jpg");
	background-position: center;
	background-size: contain;
	background-repeat: none;
	}

    #bottomfilter{
	background-color: #c4e3ed;
	opacity: .5;
	height: 100%;
	width: 100%;
}

    #bottomtext{
	margin-top: 5%;
	color: white;
	text-align: center;
	font-family: Times New Roman;
	font-size: 1.5em;
}
	input[name=t] {
	margin: 0; 
	padding: 0; 
	position: relative; 
	width: 88%;
}
	
		#whicon {
		margin: 0; 
		padding: 0; 
		position: relative; 
		width: 10%; 
	}

	.minibutton {
		width: 15%; 
		height: auto; 
		margin-left: 5%; 
		display: inline-block;
	}

	#buttonbox {
		width: 88%; 
		height: 20%; 
		margin: 8%;
	}
	
	
#searchpackage {
	background-color: white; 
	width: 47%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}

#thrmenu {
	background: none; 
	height: 100%; 
	width: 10%; 
	margin-left: 2%; 
	display: inline-block; 
}
#a3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/yt_logo_mono_dark-e1559148736342.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 0; 
	display: inline-block;
}

#b3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/instalogo.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
	}
#c3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/badgeRGB-white.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#d3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/mailsym.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#mini3{
	background: none; 
	width: 26%; 
	height: 100%; 
	margin-left: 6%; 
	margin-right: 2%; 
	display: inline-block;
}
	.sectioncommon {}
	.extracommon {}
	.titler {
	}
		.titlel {
	}
	 
.headlinesection {
	font-size: 26px;
	width: 100%;
}
.summarysection {
	font-size: 16px;
	width: 100%;
}
	
	#headpic {
		margin: 0;
	width: 100%;
		height:  auto;
	}
	#titletextbox {
		font-size: 56px;
		margin-top: 25%;
		padding: 0;
	}
	#subs {
		font-size: 20px;
		margin-top: 2%;
		padding: 0;
	}
	#borderboxtext{
		width: calc(100% - 10vh);
		height: 60vh;
		margin: 5vh;
		z-index: 600;
		border: none;
		background: none;
	}
	#excerptbox{
		width: 80%;
		background: none;
		height: 15vh;
		overflow: hidden;
		padding: 3% 5% 3% 5%;
		margin: 5%;
		font-size: 20px;
		z-index: 700;
		border: .5px solid white;
	}
	
	#up {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}
	
	#down {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}

#cellsearchbox{
	height: 10vh;
	width: 100%;
	position: absolute;
	margin-top: 25vh;
	background-color: lightgray;
	padding: 0;
	color: white;
	display: flex;
}
	
	#cellblogcontainer{
	width: 2000%;
	height: 100%;
	float: left;
	padding: 0;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}
	
.moreblock {
	float: right;
	width: 5%;
	width: 25%;
	height: 100%;
	line-height: 1;
	font-size: 14px;
	padding-left: 7%;

}
.topblock {
	font-family: Century Gothic;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 1rem;
	height: 15%;
	border-bottom: solid;
	border-bottom-color: white;
	border-bottom-width: .5px;
	overflow: hidden;
}

.block {
	float: left;
	display: inline-block;
	position: relative;
	font-size: .8rem;
}

.date {
	float: left;
	height: 10%;
	width: 100%;
	position: relative;
	font-size: .6rem;
}
.titleblock {
	width: 67.5%;
	float: left;
	height: 100%;
	border-right: solid;
	border-right-color: white;
	border-right-width: .5px;
	line-height: 2;
	font-size: 14px;
}

	.postcontainer {
	height: auto;
	width: 50vw;
	padding: 0;
	overflow: hidden;
	border-width: .5px;
	border-color: lightgray;
	border-style: solid;
	color: white;
	position: relative;
	float: left;
		margin-left: 5vw;
		margin-top: 2vh;
		margin-bottom: 2vh;
}
	#rightcontainer {
		width: 0;
		height: 0;
	}
	#blogcontainer {
		width: 0;
		height: 0;
	}

	#cellrightcontainer {
	height: auto;
	width: 100%;
	overflow-y: hidden;
    display: inline-block;
	background-color: gray;
	margin-left: 0;
	}
	#searchbox {
		width: 0;
		height: 0;
	}
	input[type=text] {
  width: 130px;
		color: white;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
		border-color: none;
  font-size: 16px;
  background-color: none;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
		display: inline-block;
}

input[type=text]:focus {
  width: 100%;
	color: black;
	background-color: white;
}
	
	footer {
	width: 96%;
	height: 15vh;
	padding: 2%;
	background-color: lightgray;
	font-size: 2.5vh;
	text-align: center;
	margin-bottom: 0;
	float: left;
}

}
@media screen and (max-width: 480px) {
	
		.comment-author .avatar {
		height: 20px;
		width: auto;
	}
	#comments {
		background-color: #bedbf3;
	}
	.block {
		 font-size: 14px;
	 }
	 .titleblock {
		 font-size: 10px;
	 }
	 .date {
		 font-size: 12px;
	 }
	 .moreblock {
		 font-size: 6px;
	 }

	#date {
		font-size: 10px;
	}
	#post {
		font-size: 16px;
	}
	.sectioncommon {
		
	}
	.extracommon {
		font-size: 12px;
	}
	 .titler {
	}
		 .titlel {
	}
	 
	.headlinesection {
	font-size: 18px;
	}
	 
	 .summarysection {
		 font-size: 12px;
	 }
	   #sidebar{
	height: 25vh;
    width: 100%;
	position: absolute;
	float: left;
	margin: 0;
}

    #mySidenav {
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/gardteal.jpg");
	background-position: center;
	background-size: cover;
}

  #center{
	width: 100%;
	  min-height: 100vh;
	height: auto;
	margin-left: 0;
	margin-top: 35vh;
	background-color: white;
	}

	#logobox{
		width: 100%;
	}
	#logo {
		margin-left: 25vw;
	}
    header {
	background-color: #bedbf3;
	height: auto;
	width: 100%;
	overflow-y: hidden;
	}

    #top {
	height: 0%;
	width: 0%;
	background: #e3f9fb;
	}

    #menucontainer {
	height: 0%;
	width: 0%;
	margin: 0%;
	background: none;
	border: solid white;
	border-width: 0px;
	display: inline-block;
	font-family: Century Gothic;
	color: gray;
	text-align: center;
	letter-spacing: 0px;
	font-size: 0vh;
}

.bar {
	width: 80%;
	height: 10%;
	background-color: gray;
	margin: 10% 0;
	margin-left: 10%;
}

#menucontainer:hover {
	background-color: #dcefff;
}

    #middle{
	height: 100%;
	width: 75%;
	float: right;
	margin-left: 25%;
	background: none;
	background-size: cover;
	}

    #bottom{
	height: 100%;
	width: 25%;
	position: absolute;
	float: left;
	background-color: #c4e3ed;
	background-image: url("https://peggyslittlecorner.com/wp-content/uploads/2019/04/hellomom.jpg");
	background-position: center;
	background-size: contain;
	background-repeat: none;
	}

    #bottomfilter{
	background-color: #c4e3ed;
	opacity: .5;
	height: 100%;
	width: 100%;
}

    #bottomtext{
	margin-top:5%;
	color: white;
	text-align: center;
	font-family: Times New Roman;
	font-size: 1.5em;
}
	input[name=t] {
	margin: 0; 
	padding: 0; 
	position: relative; 
	width: 88%;
}
	
		#whicon {
		margin: 0; 
		padding: 0; 
		position: relative; 
		width: 10%; 
	}

	.minibutton {
		width: 15%; 
		height: auto; 
		margin-left: 5%; 
		display: inline-block;
	}

	#buttonbox {
		width: 88%; 
		height: 20%; 
		margin: 8%;
	}
	
	
#searchpackage {
	background-color: white; 
	width: 47%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}

#thrmenu {
	background: none; 
	height: 100%; 
	width: 10%; 
	margin-left: 2%; 
	display: inline-block; 
}
#a3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/yt_logo_mono_dark-e1559148736342.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 0; 
	display: inline-block;
}

#b3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/instalogo.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
	}
#c3 {
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/badgeRGB-white.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#d3{
	background-image: url('https://peggyslittlecorner.com/wp-content/uploads/2019/05/mailsym.png'); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	width: 20%; 
	height: 100%; 
	margin-left: 2%; 
	display: inline-block;
}
#mini3{
	background: none; 
	width: 26%; 
	height: 100%; 
	margin-left: 6%; 
	margin-right: 2%; 
	display: inline-block;
}
	
	#headpic {
		margin: 0;
	width: 100%;
		height:  auto;
	}
	#titletextbox {
		font-size: 42px;
		margin-top: 25%;
		padding: 0;
	}
	#subs {
		font-size: 18px;
		margin-top: 2%;
		padding: 0;
	}
	#borderboxtext{
		width: calc(100% - 10vh);
		height: 60vh;
		margin: 5vh;
		z-index: 600;
		border: none;
		background: none;
	}
	#excerptbox{
		width: 80%;
		background: none;
		height: 15vh;
		overflow: hidden;
		padding: 3% 5% 3% 5%;
		margin: 5%;
		font-size: 16px;
		z-index: 700;
		border: .5px solid white;
	}
	
	
	#single .excerpt {
		display: none;
	}
	#up {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}
	
	#down {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}

#cellsearchbox{
	height: 10vh;
	width: 100%;
	position: absolute;
	margin-top: 25vh;
	background-color: lightgray;
	padding: 0;
	color: white;
	display: flex;
}
	
	#cellblogcontainer{
	width: 2000%;
	height: 100%;
	float: left;
	padding: 0;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}
	
	.postcontainer {
	height: auto;
	width: 50vw;
	padding: 0;
	overflow: hidden;
	border-width: .5px;
	border-color: lightgray;
	border-style: solid;
	color: white;
	position: relative;
	float: left;
		margin-left: 5vw;
		margin-top: 2vh;
		margin-bottom: 2vh;
}
	#rightcontainer {
		width: 0;
		height: 0;
	}
	#blogcontainer {
		width: 0;
		height: 0;
	}

	#cellrightcontainer {
	height: auto;
	width: 100%;
	overflow-y: hidden;
    display: inline-block;
	background-color: gray;
	margin-left: 0;
	}
	#searchbox {
		width: 0;
		height: 0;
	}
	input[type=text] {
  width: 130px;
		color: white;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
		border-color: none;
  font-size: 16px;
  background-color: none;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
		display: inline-block;
}

input[type=text]:focus {
  width: 100%;
	color: black;
	background-color: white;
}
	
}

 @media screen and (max-width: 200px) {
	 .block {
		 
	 }
	 .titleblock {
		 
	 }
	 .date {
		 
	 }
	 .moreblock {
		 
	 }
	 #excerptbox {
		 font-size: 15px;
	 }
	 #titletextbox{
		 
	 }
	 #subs { 
	 }
	 #date {}
	#post {
		
	}
	 .sectioncommon {}
	 .extracommon {}
	 .titler {
		 font-size: 12px;
		 width: auto;
		 max-width: 66%;
		 padding: 0;
		 margin: 0;
		 overflow: hidden;
		 float: right;
	}
	 	 .titlel{
		 font-size: 12px;
		 width: auto;
		 max-width: 66%;
		 padding: 0;
		 margin: 0;
		 overflow: hidden;
		 float: left;
	}
	
	#headlinesection {
	
	}
	 
	 #summarysection {
		 
	 }
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

ul {
	list-style: none;
}

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

George Appiah
(@gappiah)

5 years, 10 months ago

(Sorry, I’m on the road now, and can’t dig deep into your CSS to answer your specific question. This is just general feedback!)

I grew up on the farm and plan to return to live on a homestead “someday”… so I instantly fell in love with your site’s general design and concept.

That said…

The site doesn’t look “great everywhere else” as you might think! The site looks identical in Microsoft Edge, as it does in Firefox. It’s worse in Internet Explorer. Even in Chrome and Chromium-derived browsers where it appears to look OK, there are several design, usability and accessibility issues. Mobile is not so great either in any browser on both Android and iPhone ??

I’m sorry if I come off as being too harsh… especially as I’m unable to offer any additional help. But this is my honest feedback.

It has recently come to my attention that the website I have been developing does not look well on Mozilla.

This raised an alarm, and, perhaps, this is the root of the problem. Cross-browser testing (manually or automated) should be part of your workflow as you design and a site. This way, you can catch little variations in the way different browsers render your code as you build it, instead of trying to troubleshoot an entire page now.

Good luck, Peggy!

CrouchingBruin
(@crouchingbruin)

5 years, 10 months ago

If you look at the Inspector Console, you’ll see an error at line 237 of the theme’s javascript library https://peggyslittlecorner.com/wp-content/themes/html5blank-stable/html5blank-stable/js/scripts.js. You can see this error in both Firefox and Chrome.

For Chrome, the error is:

Uncaught TypeError: Cannot set property ‘innerHTML’ of null

For Firefox, the error is:

TypeError: document.getElementById(…) is null

The error occurs on calls to the Calendar function. It looks like the function is trying to look for a table with the ID caltab and not finding it, which is why the html variable is set to null.

You might try downloading the latest version of the theme. The theme’s web page says the latest version is 1.5, and the stylesheet of the theme that you’re running says it’s version 1.4.3.

Thread Starter starwag
(@starwag)

5 years, 10 months ago

George, I appreciate your praise and your honesty. Admittedly I have neglected Microsoft Edge and Internet Explorer, and haven’t checked Mozilla in a while, but I definitely have been checking it constantly on an iphone, an android, various tablets, Opera, and Chrome, and don’t see any of the design issues you are seeing. I have some things still marked as private, which is disturbing the design a bit, but once pictures are loaded and the posts are made public this goes away. If you are seeing something more drastic let me know, because then I’ll know I have another problem to address: why I’m not seeing what another person is seeing.

CrouchingBruin, I removed the offending JS, which doesn’t seem to make any difference to the Mozilla problem. The stylesheet on the 1.5 version of the theme I just downloaded appears to have the same 1.4.3 description at the top, so I’m assuming not much has changed there.

Is this likely CSS? I don’t come from a level of experience to say whether or not this problem is likely linked to CSS. I feel it probably is, but couldn’t say for sure.

Thanks for both of your responses so far.

CrouchingBruin
(@crouchingbruin)

5 years, 10 months ago

I think you may have fixed the problem. Right now, it looks the same on Firefox as it does in Chrome. Maybe you need to clear the cache on your Firefox browser to get a fresh look.

George Appiah
(@gappiah)

5 years, 10 months ago

I’m sorry if I sounded a bit dramatic. I was really referring to the overall mobile experience, not just the layout.

Right now some of the issues I saw are gone now (eg the “MORE” text were much bigger, and the greater than signs > all dropped to a second row, making the page not look so good. That’s not the case now.)

Right now three things that immediately jump at me:

1) I see social media icons, and, naturally, I want to check them out. But when I tap, the icons do nothing. (Tested only on Android phones with Chrome and Firefox)

2) Even at the highest brightness, there was very little contrast between the text of the individual menu items and the menu background, making it difficult to read. But this is probably my phone’s fault, as the contrast was much better when I took a screenshot from the phone and viewed it on my PC (though I saw the same behavior on three different high-end Android phone brands and an ancient iPad2.)

3) I see a search button, but only a VERY TINY tiny text input field. This box is so tiny that I can’t see anything I type.

NB: I can also now see the same design in Firefox as in Chrome, so it appears you’ve fixed your original issue now.

Thread Starter starwag
(@starwag)

5 years, 9 months ago

Thanks for the help guys! Since the problem seemed to be CSS and was largely on Mozilla, MS Edge, and IE, I went to Mozilla’s site to see if there was anything about CSS specific to them. I found a link to W3C validator, which I have never used before, and showed me exactly where the errors were. As it turns out, my calc() values were crammed too closely together, and Chrome was just being very forgiving. I can’t believe I have made it all this way without ever having used this! Now I’m wondering what other tools I haven’t been exposed to that could make my life a little easier. Thanks again!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Distorted Website on Mozilla’ is closed to new replies.

Distorted Website on Mozilla

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics