Improving the look on mobile device

[Helaine Bader]

Hi! I love your themes and have been so pleased with how well they work! On my personal site, I have made quite a few adjustments to the Agency theme in order to make it work with my design. As I have made a lot of changes, I’m not sure if you can (or will) still help me. But I’m hoping so 🙂

For the site helainebader.com, I have made 4 widget text boxes instead of 3, but I was wondering if there is anyway in responsive mode that the title boxes (About Me in pink, Nonprofits in orange, etc.) in each of the widgets can remain 100% in responsive mode? Currently, they only go about 75% across the screen. I think it is because I have set them to an absolute size, but I’m not sure how to fix this (or if it is even possible).

Also, I adjusted the logo/nav bar to be at the top of the page. But now I have a lot of white space around the logo and menu when it is in the responsive mode. Is there anything I can do to tighten that up as well?

Again, I understand if I’ve modified this too much for your support. But I thought I would at least ask.

Thanks so much for your excellent templates!
Helaine

[Bill Robbins]

Good Day Helaine,

Thank you for your business first of all. Great looking site too. I think we can get things working a bit better for you in the responsive part of things. Here’s what I would do:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (min-width: 768px) and (max-width: 991px) {
   	
   	.home-sidebar {
   		padding-left: 40px;
   		padding-right: 0;
   		-moz-box-sizing: border-box; 
   		-webkit-box-sizing: border-box; 
   		box-sizing: border-box; 
   	}
   	
   	.home-sidebar .widget {
   		width: 300px !important;
   		margin: 20px 40px 20px 20px;
   	}
   	
   	.home-sidebar #text-3 {
   		clear: both;
   	}
   	
   }
   
   @media only screen and (max-width: 767px) {
   	
   	.home-sidebar {
   		padding: 40px;
   		-moz-box-sizing: border-box; 
   		-webkit-box-sizing: border-box; 
   		box-sizing: border-box; 
   	}
   	
   	.home-sidebar .widget {
   		margin-right: 40px;
   	}
   	
   	.home-sidebar #text-3 {
   		clear: both;
   	}
   	
   	#nav-bar {
   		margin-top: 10px;	
   	}
   	
   	.flexslider {
   		padding: 0;
   	}
   
   }
   

3. Update your settings.

The styles there are in what are called media queries. That means those styles are only in use in certain situations. Those specify which browser window sizes must be present for those styles to be applied. By using those we can specify when the changes take place.

Give those a shot and see if they don't help out. If you have any questions or trouble, just let me know.

Thanks again,
Bill

[Helaine Bader]

Thank you so much, Bill! It worked!! I REALLY appreciate your help and so glad you like the site.

[Bill Robbins]

That’s great to hear Helaine. If you need anything else, just let me know.

Thanks,
Bill

[Author]

Posts