nsitedesigns
asked on
why isn't site text responsive
http://25a.e58.myftpupload.com/meat-packaging-processing/
Can't figure out why site text is not responsive. The photos seem to be responsive as they stack up at the bottom of the page below the text on smaller screens. Am at my wits end. Any help would be appreciated.
screenshot
https://screencast.com/t/SAMkvlcXlJ8
Can't figure out why site text is not responsive. The photos seem to be responsive as they stack up at the bottom of the page below the text on smaller screens. Am at my wits end. Any help would be appreciated.
screenshot
https://screencast.com/t/SAMkvlcXlJ8
/* media screens */
@media only screen and (max-width: 1200px) {
.content {
float: none;
}
}
/* Before Header
--------------------------------------------- */
.before-header {
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
}
@import url('https://fonts.googleapis.com/css?family=Oswald:500|Roboto+Condensed:300,400');
.nf-field-label label {
font-weight: 400;
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 17px;
font-size: 1.7rem;
color: #016633;
}
/* BULLETS - see theme customization */
/* ........SLIDER........... */
.content .genesis_responsive_slider h2 {
color: #fff;
font-size: 22px;
font-size: 2.2rem;
font-weight: normal;
text-transform: capitalize;
font-family: "Oswald Medium", sans-serif;
letter-spacing: .1em;
}
/* ........H TAGS........... */
h1.entry-title {
font-size: 3.4rem;
}
header.entry-header {
font-size: 2.4rem;
}
h4 { /* used in slider*/
color: #fff;
font-size: 22px;
font-size: 2.2rem;
font-style: normal;
font-weight: 500;
letter-spacing: .1em;
font-family: "Oswald Medium", sans-serif;}
/* ........ NAVIGATION ........... also see custom settings under Customize/additional css.......*/
.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu li:focus,
.genesis-nav-menu li:hover,
.genesis-nav-menu li:focus a,
.genesis-nav-menu li:hover a,
.genesis-nav-menu .current-menu-item > a:focus,
.genesis-nav-menu .current-menu-item > a:hover {
background-color: #016633;
color: #666;
text-decoration: none;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item a {
color: #016633;
}
.genesis-nav-menu {
background-color:#016633;
font-family: 'Oswald', sans-serif;
font-size:17px;
/*! font-size: 1.7rem; */
letter-spacing:.05em;
}
.genesis-nav-menu .current-menu-item > a {
background-color: #004e25;}
.genesis-nav-menu a {
color: #fff;
font-weight:bold;
text-decoration:none;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item a {
color: #fff;
}
/*... mouseover effect on main navigation */
.genesis-responsive-menu .genesis-nav-menu .menu-item a:hover {
color: #fff;
text-decoration:none;
background-color: #004e25;}
/* ........MAIN CONTENT AREA ........... */
.content {
width: 780px; /* Needed so that .sidebar-primary would not drop to bottom of page*/
}
/* Locations pages green box in sidebar
--------------------------------------------- */
.greenbox-locations {
background-color: #016633;
padding:20px 10px 20px 30px;
margin-left:30px;
width:100%;
}
.greenbox-locations h2 {
color:#FFF;
}
.greenbox-locations p {
color:#FFF;
}
#locations-white-text {
color:#fff;}
#sidebar {
background-color:rgb(0,0,0);
color:rgb(255,255,255);
width:200px;
border:1px solid rgb(0,0,0);
padding:20px;
}
#sidebar a.link {
display:block;
margin-bottom:5px;
}
#sidebar.contact {
background-color:rgb(19,170,71);
color:rgb(255,255,255);
}
#sidebar.locations {
background-color:rgb(255,255,255);
color:rgb(0,0,0);
}
/* ........SIDEBAR ........... */
.sidebar .widget { /* SIDEBAR IMAGES */
padding: 0px 30px 10px 0px;
}
.sidebar {
margin-top:60px;}
.sidebar-primary {
background-color: #fff;
}
.sidebar p {
margin-bottom: 16px;
color: #000;
}
.sidebar .widget h2 {
color:#000;
margin-bottom:1.3em;
font-size: 1.6em;}
/* ........ DROP SHADOWS ........... */
.home-middle, .home-top {
box-shadow: 5px 0 10px -4px rgba(148, 150, 153, 0.8), -8px 0 8px -4px rgba(148, 150, 153, 0.8);
}
/* ........ HOME PAGE ICONS ........... */
a.alignnone {
display: block;
text-align: center;
}
.home article.entry {
text-align: center;
}
.entry-title a {
text-decoration:none;
text-align:center;
color:#000;}
h4.entry-title {
text-align:center;}
.entry-image attachment-page {
text-align:center;}
/* ........ BREADCRUMBS ........... */
.home .breadcrumb { display: none; }
/* ........ HEADER ........... */
.site-header {
margin: 0px auto;
background-color:#016633;
box-shadow: 5px 0 10px -4px rgba(148, 150, 153, 0.8), -8px 0 8px -4px rgba(148, 150, 153, 0.8);
border-bottom: 5px solid #fff;
}
h1.entry-title {
font-family: 'Oswald', sans-serif;
font-size: 24px;
}
/* ........ LOGO ........... */
.header-image .site-title a {
background-size: contain !important;
float: left;}
/* ........ LINKS ........... */
a{
color: #248c01;
text-decoration: underline;
}
/* ........ FOOTER ........... */
.site-footer p {
margin: 0;
text-transform: capitalize;
color:#fff;
}
.site-footer h2 {
color: #fff;
font-size: 20px;
font-size: 2.0rem;
font-style: italic;
text-transform: capitalize;
letter-spacing: 2px;
text-align: right;
padding-right:30px;
}
.site-footer {
padding: 15px 0 8px 0px;
background-color:#016633}
.footer-widgets .widget {
word-wrap: break-word;
color: #fff;
font-size: 15px;
font-size: 1.5rem;
}
.footer-widgets .wrap {
overflow: hidden;
padding: 30px 30px 0px;
background-color:#016633;
}
.footer-widgets a, .footer-widgets .entry-title a:focus, .footer-widgets .entry-title a:hover {
color: #fff;
text-decoration:none;
}
.footer-widgets a:hover {
color: #ccc;
text-decoration:underline;
}
.entry-title a:hover {
text-decoration:underline;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
padding: 0 2.8%;
width: 20%;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I removed this css and cleared cache and the problem is still there. Do you see it as corrected?
ASKER
I noticed too that the footer navigation (green box with text links) is all messed up too. The words are merging into each other. Maybe this is part of the problem too?
screenshot
https://screencast.com/t/jWOTvNPPK
screenshot
https://screencast.com/t/jWOTvNPPK
ASKER
I adjusted the footer css. It helped in tablet view but not phone view.
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
padding: 0 8.8%;
width: 32%;
}
looks good to me,
clear your cache, or press Ctrl+F5
clear your cache, or press Ctrl+F5
ASKER
points awarded to HainKurt because he provided solution first. Thanks Dave.
Open in new window