mike19145

Yeah, just wanted to second what @mackey6879 had said.

Would love to hear of a solution to this problem.

Regards,

Yeah, so I just want to echo what @mackey6879 is saying in regards to: “The WordPress sites with all the plug-ins are up to date. However, in the WP Central panel I see that there are plugins that are not up to date.”

I’ve also have done a manual sync and to no avail.

Here is a screenshot of the message I’m getting in regards to trying to update the plugins again – https://imgur.com/1gks1jB

So Basically, even though it says plugins updated successfully, it still shows ‘x’ number of plugins need to be updated once I click ‘okay’ on the popup.

Will send an email to support.

Hey Bam Bam,

Thanks for the reply. I’ve tried what you said but the image still resizes improperly. As I said, the image below the wp-custom-header resizes so it is always completely view-able whereas the wp-custom-header does not.

I’ve made a YouTube video showing this issue.

https://youtu.be/5aP1qTYRcTs

Any thoughts?

Thanks,
Mike

Hey webbrewers

Thanks for your reply.

I have been thinking about it but I’m still not following. When I changed the CSS and substituted Michelle’s code in (see below), the problem persisted even though the p element was removed from #main.

Also, why would .newsblock img have a p element associated with it? Would it automatically inherit it from the #main p (in my original CSS post)?

#main {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 620px !important;
}

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

.newsblock img {
	float: right !important;
	border: 1px solid #CCCCCC !important;
	width: 210px !important;
}

.newsblock p {
	float: left !important;
	width: 390px !important;
	margin-bottom: 1.6em !important;
}

Thanks
Mike

Hey alchymyth,

Thanks for the small piece of advice. It started my 4 hour journey for the solution. Anyway, I went ahead a did a bunch of online research and I will post my solution to this problem for anyone who faces the same thing.

Let me first say that, using a fixed value width was the problem. I found some great online resources from SmashingMagazine.com that dealt with responsive design. Here is a link to the two articles https://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ and https://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/. Both of these resources were invaluable and resulted in me adding some CSS that only executed when a device of no greater then 480px of screen resolution came to my site. Here is the code I added:

@media only screen and (max-device-width: 480px) {
	div#main {
		width: 100% !important;
	}

	div.newsblock {
		width: 99% !important;
	}

	div.newsblock img {
		display: none !important;
	}

	div.newsblock img.smallscreen {
		display: inline !important;
		width: 99% !important;
	}

	div.newsblock p {
		float: none !important;
		width: 99% !important;
	}
}

The img.smallscreen was added to replace the lower resolution version of the image with a better one. Here is what my post code looked like like when I was finished.

<code>
<div id="main">
<div class="newsblock">

<a href="https://n3-art-lab.com/?attachment_id=444" rel="attachment wp-att-444"><img class="alignnone size-full wp-image-444" alt="N3 New Reaized Thumbnail" src="https://n3-art-lab.com/wp-content/uploads/2014/02/N3-New-Reaized-Thumbnail.jpg" width="200" height="281" /></a>

<img class="smallscreen" src="https://n3-art-lab.com/wp-content/uploads/2014/02/New-Logo-for-500px-devices.jpg" alt="New Logo for 500px devices" width="500" height="701"  />

<div id="https://n3-art-lab.com/wp-content/uploads/2014/02/New-Logo-for-500px-devices.jpg"></div>

2014.2.18
<strong>N3 ART Lab企画展:</strong>
?嶋田日出夫展　-ビオハウスへのオマージュ-
HIDEO SHIMADA WORKS- The Homage to Bio House -?

会期：2014年3月2日(日)～23日(日) / 金?土?日
14:00～18:00のみ開廊 その他の曜日予約制
(tel090-9003-6944)

<strong>オープニングレセプション：3月2日(日)17:00~</strong>

会場：N３ART Lab　　山口県山口市駅通り 1-7-7　https://n3-art-lab.com
問合せ： tel090-9003-6944 [email protected]
主催：N3 ART Lab
共催：公益財団法人山口市文化振興財団、山口大学教育学部
後援：山口現代藝術研究所(YICA)
HEART関連企画

[展覧会について]：N3ART Labでは嶋田日出夫展を行います。嶋田氏は東京藝大卒業ののちドイツのデュッセルドルフ?クンストアカデミーで研鑽を積み、帰国後長らく家業の建設業に勤しむ傍ら、ミニマルかつコンセプチュアルなドローイングやタブロー作品等を制作してきました。長い沈黙を破って展示される嶋田作品にご期待下さい。

</div>
<div class="newsblock"></div>
</div>
</code>

Hey everyone,

So I figured it out. Apparently, WordPress will wrap any images you insert into a post in a paragraph tag. The way to address this is to first create a child theme so you can safely modify your theme https://codex.www.ads-software.com/Child_Themes and edit the functions.php to add the following code:

function filter_ptags_on_images($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

The code was found on this site https://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/#comment-1160678

And a big thanks to Michelle and webbrewers for answering this question.

Hey webbrewers,

Yes, I finally partially understand what you are saying and when I removed the section of CSS

.newsblock p {
	float: left !important;
	width: 390px !important;
	margin-bottom: 1.6em !important;
}

it rendered properly but now my options to format the text (float, width and margin) will not be available.

I tested the code on CSSdesk.com and it renders properly with all the code present but for some reason on my site it wraps the image in the <p> even if I remove it from the CSS file. Can I use some other tag then <p> to hold CSS rules for the text which i want to include and format?

Thanks in advance.

Hey webbrewers

Thanks for your reply.

Currently, I’m using Michelle’s code which does not wrap the image in the p tag (See below). Also, I’m sorry but I’m not sure I completely understand what you are saying. The .newsblock container is 605px which would fit the .newsblock p (390px) and and .newsblock img (210px). I’m still not sure why the image will not float to the right. Also, I removed the <span class=”photo”> tag from the text. Please see the second code box for an updated view.

#main {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 620px !important;
}

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

.newsblock img {
	float: right !important;
	border: 1px solid #CCCCCC !important;
	width: 210px !important;
}

.newsblock p {
	float: left !important;
	width: 390px !important;
	margin-bottom: 1.6em !important;
}

<code>

<div id="main">
<div class="newsblock">

<img src="https://n3-art-lab.com/wp-content/uploads/2014/02/resized-test-200x280.jpg" alt="resized test" width="200" height="280" />

<p>
 <strong>
This is a test of the text. I'm not sure why this is not working. Its been almost 8 hours now.
 </strong>
</p>

<p>
This is also more test text which will be a little long then the previous text to test the CSS formatting.
</p>

</div>

<div class="newsblock">
<p>
tsi is afa fsaf asd fs asdf a fsdf afasd fas fa sdfs df sdf asf
</p>
</div>

</div>

</code>

Thanks for your help

Hey Michelle,

Thanks for the reply.

I’m using the important tag because I want to make sure they override any styles that were in my template previously.

I’ve tried both methods. I’ve added the “display: block” to the .newsblock .photo class and I also tried replacing all the styles with the one in your post but nothing seems to move the image. Also, here is the page I’m trying to edit https://n3-art-lab.com/?page_id=283. Any ideas?

PS: I had to add one line to the code you gave me which was adding a float: left !important; to the .newsblock class. I did this because top border seems to repeat without that line of code. Here is a pic of the repeating border https://n3-art-lab.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-16-at-11.37.28-AM.png. Also, here is the change I’m referencing in context:

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

Thank Thank Thank you very much for taking the time to check this out.

Mike

Hey Jeremy,

I just downloaded the plugin and tested it out. It successfully posted to my Facebook page using the YouTube thumbnail in my post.

You are awesome.

Thanks WPyogi I will look into both of those resources.