Removing all responsiveness from my Expound theme site

• 

  fcanimalshelter · Member · Dec 28, 2013 at 8:11 pm

  • Copy link
  • Add topic to favorites

  Hello!

  I have been building this website for the animal shelter I work at for a while now using the Expound theme. I had to make some adjustments to the width and positioning of the sidebar and posts on the home page to make the site look how I wanted it to. Unfortunately I didn’t realize until the site was completed that the adjustments I made ruined the responsiveness of the site. Now when the size of the container is adjusted all of the the images and text just get jumbled and overlap. I’ve spoken with WordPress support and even made a Tweaky project to try to sort this out, which has been very helpful, but their recommendations are a bit beyond my skill level. I’d like to remove all responsiveness from my site. Here is what WordPress recommended I do:

  “If you prefer, another option is to add custom CSS to rewrite and remove the responsive parts of your theme. In other words, anywhere in your theme’s CSS where it changes the layout for smaller screens, you can add custom CSS to make it match the layout on larger screens instead. (That effectively removes the responsiveness.)”

  Is there someone that could walk me through this, or possibly make the necessary changes for me? This is the first time I’ve done anything like this so I’m a bit lost. I’d love to be able to start using the new website soon. Please help! :)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 29, 2013 at 9:13 pm

  • Copy link

  Hi there, what you are asking is a pretty big job. Copy your CSS out and paste it into a plain text file and save it for reference.

  Delete what you have in the CSS edit window and paste in the following as a starter and we will work from there. Also, considering you are making this fixed width, you need to go to Appearance > Mobile and activate the mobile theme or visitors to your site on phones and tablets will have a hard time reading and navigating your site.

  @media (max-width: 1080px) {
  	#page {
  		width: 1020px;
  	}
  
  	#primary {
  		width: 740px;
  	}
  
  	.expound-full-width #primary {
  		width: 1020px;
  	}
  
  	.featured-content-secondary {
  		padding-top: 20px;
  		padding-bottom: 0;
  		padding-left: 40px;
  		padding-right: 40px;
  	}
  
  	.featured-content-secondary article {
  		width: 220px;
  	}
  
  	.featured-content-secondary .entry-thumbnail {
  		float: left;
  		margin-bottom: 0;
  	}
  
  	.featured-content-secondary .has-post-thumbnail .entry-header,
  		.featured-content-secondary .has-post-thumbnail .entry-summary {
  		margin-left: 240px;
  	}
  
  	.featured-content-secondary .has-post-thumbnail .entry-title {
  		clear: none;
  		margin-top: -5px;
  	}
  
  	.single .site-content .related-content article {
  		width: 200px;
  	}
  }
  
  @media (max-width: 1020px) {
  	#page {
  		width: 1020px;
  	}
  
  	#primary {
  		width: 740px;
  	}
  
  	.expound-full-width #primary {
  		width: 1020px;
  	}
  
  	.single .site-content .related-content article {
  		width: 220px;
  	}
  }
  
  @media (max-width: 960px) {
  	#page {
  		width: 1020px;
  	}
  
  	#primary {
  		width: 740px;
  	}
  
  	.expound-full-width #primary {
  		width: 1020px;
  	}
  
  	.single .site-content .related-content article {
  		width: 220px;
  	}
  }
  
  @media (max-width: 900px) {
  	#page {
  		width: 1020px;
  	}
  
  	#primary {
  		width: 740px;
  		margin-right: 0;
  	}
  
  	#secondary {
  		width: 260px;
  		margin-left: 0;
  	}
  
  	.expound-full-width #primary {
  		width: 1020px;
  	}
  
  	.featured-content .has-post-thumbnail .entry-thumbnail {
  		width: 220px;
  	}
  }
  
  @media (max-width: 600px) {
  	#page {
  		width: 1020px;
  	}
  }