[Matt Mizwicki]

No worries! Glad i could help.

[Matt Mizwicki]

Woot! Glad i could help.

Now that it's working, you may want to experiment with putting the code in one of the media queries. That way, the desktop css will be back to the original, and the mobile css will only be used on smaller screens. But if it doesn't seem to be messing anything else up then you can leave it.

I don't see an "embed slideshow" option on your slideshow settings unfortunately. May want to add an additional post here, because it's out of my range of expertise. I don't think iframes would be a route i'd go, but someone else may disagree.

And, If you're ever in Kona get in touch!

-matt

[Matt Mizwicki]

No, it's still not showing up. I've tried clearing browser cache, incognito mode on chrome, and my mobile device.

I think something on the server is still caching the stylesheet.

When i edit the stylesheet directly with Google Developer Tools, it fixes the issue immediately when i add the !important.

.wp-caption {
width: 100% !important;
}

[Matt Mizwicki]

Could you clear your server cache again? Because i've tried refreshing and clearing my browser cache and the !important; declaration isn't showing up. I think something else may be caching your stylesheet.

And i just did some further searching so maybe these resources may point you in the right direction...
http://wordpress.org/support/topic/captions-break-image-fluidity-in-responsive-themes-on-mobile-phones
http://wordpress.stackexchange.com/questions/107358/make-wordpress-image-captions-responsive

[Matt Mizwicki]

Ok last change....

.wp-caption {
width: 100% !important;
}

[Matt Mizwicki]

Ok, here's the last one i can think of.

Remove the code i previously sent completely.

Then replace lines #292 to #299

embed,
iframe,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

with this code...

embed,
iframe,
img,
object,
video {
	max-width: 100%;
}

.wp-caption {
	width: 100%;
}

Then clear the cache.

[Matt Mizwicki]

Ahhh....i gave you the wrong code sorry.

Change what i just sent to this...

.single-listing .wp-caption {
width: 100% !important;
}

And then, yes, flush the W3TC and MaxCDN again.

[Matt Mizwicki]

Do you mind adding

.listing .wp-caption {
width: 100% !important;
}

back to you styles.css and let me take a look while it's there so i can see what's going on?

[Matt Mizwicki]

You should be able to add (or change what is already there) something like this to your css file...

.name-of-actual-widget-class{
width: 95%;
margin-left: 2.49%;
margin-right: 2.49%;
}

[Matt Mizwicki]

Hi ginag,
The little line is showing up because of your entry-meta css. Remove the border-top: 1px solid #222; on line #1349 of your style.css file. That should fix it.

.entry-footer .entry-meta::before {
border-top: 1px solid #222;  
content: "";
display: block;
padding-bottom: 32px;
padding-bottom: 3.2rem;
width: 10%;
}

[Matt Mizwicki]

Ahhhhh....i see. Well in that case, let's try adding this near the bottom of your css file (just above the mobile responsive stuff)...

.listing .wp-caption {
width: 100% !important;
}

That may also effect the listing images near the bottom of the listing too though. Do you mind trying it out to see?

[Matt Mizwicki]

You need to change line #1312 in your stylesheet. The color of the icon is set to #fff.

Currently you have...

#responsive-menu-icon::before {
	-webkit-font-smoothing: antialiased;
	color: #fff;
	content: "\e00e";
	font-family: 'Icon';
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	margin: 0 auto;
	speak: none;
	text-align: center;
	text-transform: none;
}

Change the color property to...

color:#000;

and that should fix it. Make sure to clear you cache after you make the change.

[Matt Mizwicki]

Here's a good tutorial on how to change fonts from the WordPress Codex...
http://codex.wordpress.org/Playing_With_Fonts

[Matt Mizwicki]

The issue is with the div that the image is located in. The width is being set to 1034 pixels by a style tag.

<div id="attachment_8242" style="width: 1034px" class="wp-caption aligncenter">
<img class="size-large wp-image-8242" src="http://netdna.bigrockinvestments.com/wp-content/uploads/2014/07/Luxury-condo-Honolulu-Nauru-Tower-3001-living-room1-1024x768.jpg?c1fc04" alt="Luxury condo Honolulu - Nauru Tower 3001 - living room1" width="1024" height="768">
<p class="wp-caption-text">Living room with custom flooring</p>
</div>

Remove style="width: 1034px" from the div and it should work perfect.

[Matt Mizwicki]

Whooohooooo! Glad i could help 🙂

[Matt Mizwicki]

Sookie,
Looking into it more, i def think it has to do with one of your div's in your html not being properly closed. I think maybe it's in your sidebar widgets.

Notice the footer is working correctly on your contact page (which doesn't have a sidebar)...
http://www.ianhowlett.com/contact/

But the footer isn't working on any page with a sidebar.

I'd move all of your widgets out of your sidebar and see if that fixes the problem. If it does, add the widgets back one at a time until the problem shows up again. Then you'll know which widget is causing the problem, and you can investigate it further.

[Matt Mizwicki]

All the questions are showing up bold for me on the newest versions of Chrome and Firefox.

[Matt Mizwicki]

Hi jenglish647,
I agree with what Neil said above.

It looks like you might have a caching plugin on your site, or maybe caching activated on your server. Make sure you turn those off, and/or clear the cache after you add Neil's code and see if it works after that. That could be why it didn't work.

[Matt Mizwicki]

Hi again treztech.
To remove the line that looks like a ruler, you'll need to get rid of the code i mentioned.

I just looked at your code again and see that those lines of code are still there. So either you added them back, or your server is caching your stylesheet, so the changes aren't taking effect.

If you've got a caching plugin working, turn it off during development, and clear your cache after you delete the code and see if it takes effect. You may have to refresh your browser a few times as well.

[Matt Mizwicki]

Hi again Sookie.

So the problem is that your footer is inside the "inner" div. It needs to be outside the inner div otherwise it can't go to the full 100% width.

This is how your site has it...

<div id="inner">
         <!-- more inner div content is here-->
     <div id="footer" class="footer">
         <!-- all footer content is here-->
     </div> <!-- this is closing the footer div -->
</div> <!-- this is closing the inner div -->

So the footer is inside the inner div.

It needs to be like this for the footer to be full width....

<div id="inner">
         <!-- more inner div content is here-->
</div> <!-- this is closing the inner div -->
<div id="footer" class="footer">
         <!-- all footer content is here-->
</div> <!-- this is closing the footer div -->

Now the footer is outside of the inner div and should go full width.

I can't be sure what changed in your code, so you'll have to do a little searching.

Maybe there is an open div tag that didn't get closed?

Possibly you modified your code and used a hook that moved the footer? If so, you'll need to change your hook, because the one being used isn't correct. (If you're not sure what a hook is, then that's not the problem and you can ignore that part.)

[Author]

Posts