• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 53
  • Last Modified:

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

0
nsitedesigns
Asked:
nsitedesigns
  • 4
  • 2
1 Solution
 
HainKurtSr. System AnalystCommented:
remove

.content {
    /* width: 780px; */
}

Open in new window


http://25a.e58.myftpupload.com/?sccss=1&ver=4.8.2
Line 131
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
nsitedesignsAuthor Commented:
I removed this css and cleared cache and the problem is still there.  Do you see it as corrected?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
nsitedesignsAuthor Commented:
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
0
 
nsitedesignsAuthor Commented:
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

0
 
HainKurtSr. System AnalystCommented:
looks good to me,
clear your cache, or press Ctrl+F5
0
 
nsitedesignsAuthor Commented:
points awarded to HainKurt because he provided solution first. Thanks Dave.
1

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now