Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

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

/*  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%;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Dave Baldwin
Because of this fixed width:

/* ........MAIN CONTENT AREA ........... */
.content {
    width: 780px;  /* Needed so that .sidebar-primary would not drop to bottom of page*/
}

Open in new window

Avatar of nsitedesigns

ASKER

I removed this css and cleared cache and the problem is still there.  Do you see it as corrected?
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
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%;
}

Open in new window

looks good to me,
clear your cache, or press Ctrl+F5
points awarded to HainKurt because he provided solution first. Thanks Dave.