Problem with text widget

Hi, Sherrey:

Can you please take your site off maintenance mode so we can take a look? Thanks.

Greetings…. I second that request…a link to where this can be seen ??
Thanks. Or, if you cannot do that, perhaps paste the code you used here and I can try it in my local test site using a text widget. Is there any CSS for it as well?

Maintenance mode disabled. Here’s a post in my blog which shows the side widget entitled “Let’s Connect!” which displays the problem I’m having. Just out of curiosity earlier today I tried this same widget on Aberration and it worked just fine. So I’m a bit confused why it won’t work on Senses Lite. Thanks for your help, CrouchingBruin and Shaped Pixels member.

Thanks for disabling the maintenance mode…however, when I went to it, I still see it’s active. I’m assuming you don’t want it live too long, so I will await here for your reply so there’s less time being disabled and live to the public.

Regarding why it might now be working on Senses Lite, it could be a styling conflict. However, once I see it and the code you used for it, I can determine what solution is needed…it could be a quick fix.

Just a quick follow up…I’m going to be calling it a night here, but one thing you might be able to do (without me seeing this) is to create some custom CSS to add this to each social icon you are using (or coded)

display: inline-block;

I’m thinking this might be needed when you said you are seeing them vertical.

I doublechecked the maintenance mode and the site appears to be online and active as I too call it a night. I’ll leave it as is until you complete your work. I’m pretty much inactive right now due to an accident and that’s why I took the opportunity to work with this theme.

I’m not very good at CSS but did attempt to include the above in my html widget; no luck. Here’s what I have there now:

<div style=”text-align:center;”><img src=”https://puddletownreviews.files.wordpress.com/2015/11/twitter4.png”&gt;<img src=”https://puddletownreviews.files.wordpress.com/2015/11/facebook3.png”&gt; <img src=”https://puddletownreviews.files.wordpress.com/2015/11/google3.png”&gt;<img src=”https://puddletownreviews.files.wordpress.com/2015/11/pinterest3.png”&gt;<img src=”https://puddletownreviews.files.wordpress.com/2015/12/bloglovin.png”&gt; <img src=”https://puddletownreviews.files.wordpress.com/2015/11/mail2.png”&gt;

The site appears to still be in maintenance mode to me as well.

Also, can you please put the code between backticks? Otherwise, the code gets interpreted as part of this post page, that is, we can’t see the anchor <a> tags.

OK, I installed the theme and pasted your code into a text widget. The problem is this rule in the theme’s stylesheet:

img,
.img-responsive,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;/* Adhere to container width. */
  height: auto; /* Make sure images are scaled correctly. */
}

That is, in this theme, image elements will display as a block element, where they normally display as an inline element. That’s why the images line up OK in other themes.

To fix it for your text widget, add this rule using a custom CSS plugin (unless you’ve already created a child theme, in which case you can add it to your child theme’s style.css file):

.textwidget img {
   display: inline-block;
}

I had a feeling it was something relating to the block….

To add custom CSS, I recommend using the Simple Custom CSS plugin. Then, just as it was mentioned, do the following…although on your code part for this:

<div style="text-align:center;">

Add a class to it like this:

<div class="mysocialicons" style="text-align:center;">

Then, as CrouchingBruin suggested (just one minor adjustment), do this in your custom CSS:

.mysocialicons img {
   display: inline-block;
}

That styling will with the custom class of “mysocialicons” will only affect that one widget with your own social icon code.

First to CoachingBruin, sorry for forgetting to use the “backticks.”

OK, I followed ShapePixels instructions using Simple Custom CSS, along with his minor modification to CoachingBruin’s suggestion. After all was said and done, the widget still lined up in a single column. Did I do something wrong???? Here’s my widget text now:

<div class="mysocialicons" style="text-align:center;">
<a href="https://twitter.com/Sherrey_Meyer" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/twitter4.png"></a> <a href="https://www.facebook.com/PuddletownReviews/?ref=hl" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/facebook3.png"></a> <a href="https://plus.google.com/u/0/+SherreyMeyer/posts" target="_blank"> <img src="https://puddletownreviews.files.wordpress.com/2015/11/google3.png"> </a> <BR>
<a href="https://pinterest.com/sherreymeyer/boards/" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/pinterest3.png"></a> <a href="https://www.bloglovin.com/blogs/puddletown-reviews-14550101" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/12/bloglovin.png"></a>  <a href="https://puddletownreviews.com/about-puddletown/contact/" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/mail2.png"> </a>

Your site is still in maintenance mode. Can you temporarily disable the Simple Maintenance plugin so we can take a look?

Your code looks good, except make sure you have a closing </div> tag at the very end, after the last </a> anchor tag. And I assume you added the CSS rule to Simple CSS?

Just as it was mentioned, make sure you have your closing </div> tag too. Your complete html code should look like this:

<div class="mysocialicons" style="text-align:center;">
<a href="https://twitter.com/Sherrey_Meyer" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/twitter4.png">
</a> <a href="https://www.facebook.com/PuddletownReviews/?ref=hl" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/facebook3.png">
</a> <a href="https://plus.google.com/u/0/+SherreyMeyer/posts" target="_blank"> <img src="https://puddletownreviews.files.wordpress.com/2015/11/google3.png"> </a> <BR>
<a href="https://pinterest.com/sherreymeyer/boards/" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/pinterest3.png"></a> <a href="https://www.bloglovin.com/blogs/puddletown-reviews-14550101" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/12/bloglovin.png">
</a>  <a href="https://puddletownreviews.com/about-puddletown/contact/" target="_blank"><img src="https://puddletownreviews.files.wordpress.com/2015/11/mail2.png">
</a>
</div>

Then also as it was mentioned, making sure the custom CSS is added to the Simple Custom CSS stylesheet that is created:

.mysocialicons img {
   display: inline-block;
}

I just tested this and it worked out, showing your red/orange social icons, 3 on each row.

Hi again! Thanks for your help, but even though you’ve seen it work it doesn’t on my end. I’ve copied and pasted the html code as well as updated CSS using Simple Custom CSS copying and pasting that. Now I have two blocks, 3 vertical icons each block. I think I’ll just use one of the plugins to get this done. Perhaps I’m running something that’s interfering and it would take forever to figure out just what.

Sincerely appreciate your help. You’ve got some fantastic themes going here. This one just didn’t work for me. That does not mean I’ll leave a negative review; won’t even mention my problem. But I will leave a review reflecting on the simplicity, the beauty, and the options available.

Sherrey

Hi Sherrey….Thank you for those kind words…still, I cannot help but to solve this one for you. I’d still like to see if you can disable that maintenance mode (nice spring photo by the way) and then I can get hands on with the code to see what is happening and also see if something else like a plugin is causing problems. Is it still possible to disable your maintenance mode?

…I will wait for your reply as I am in front of the computer for most of the day now, so this won’t take me long once I can access your site.

Also, what sidebar position were you putting your social icons in?

Of course, I’ll do that right now. Thanks for your commitment.