Img in sidebar textwidget popsout

  • Resolved cd_BE

    (@cd_be)


    10 years, 5 months ago

    Hi all

    I’m currently creating my own theme. I’m almost done, but I have a issue with the sidebar text widget.

    If I add a text withe a html code to a image and don’t size it, it pops out of the sidebar.
    You can quietly see what I mean if you install the Azpismis theme and the Twenty Fourteen theme.

    If you use Twenty Fourteen and add a image (e.g.: image size 1024×768) to your sidebar text widget it fits perfectly. it automatically scales down. If you add the same image to the Azpismis sidebar text widget it leaves the sidebar space.

    I’m currently comparing the sidebar text widget codes from both themes but can’t seem to find it.

    If somebody can give me a tip or tell me what I need to look for its much appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)

  • add the coresponding CSS, depending on your sidebar’s CSS ids or classes;

    related CSS from Twenty Fourteen:

    /* Responsive images. Fluid images for posts, comments, and widgets */

    .comment-content img,
.entry-content img,
.entry-summary img,
#site-header img,
.widget img,
.wp-caption {
	max-width: 100%;
}

    the selectors for your theme might differ…
    try using a browser inspections tool to find the involved CSS selectors.

    Thread Starter cd_BE

    (@cd_be)

    Oh, thanks.

    That didn’t work but with your mention of the related CSS from Twenty Fourteen I found what I was looking for.

    Only thing now is that it works in my browser inspection tool, but when I do the same in the style.css nothing happens.

    Let’s have some CSS fun ??

    Thread Starter cd_BE

    (@cd_be)

    The snippet from Jeff Sebring did the trick!

    /**
 * Responsive WordPress Core Theme Styles
 * https://jeffsebring.com/responsive-wordpress-images/
--------------------------------------------------- */

.sticky,
.bypostauthor,
.gallery-caption {
   display: normal;
}

.alignnone {
   margin: 1em 1em 1em 0;
}

.aligncenter,
div.aligncenter {
   display:block;
   margin: .5em auto;
}

.alignright {
   float:right;
   margin: 0 0 1em 1em;
}

.alignleft {
   float:left;
   margin: 0 1em 1em 0;
}

.aligncenter {
   display: block;
   margin: 1em auto;
}

img,
img[class*="align"],
img[class*="wp-image-"] {
   max-width: 100%;
   height: auto;
}

img.wp-smiley {
   border: none;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
}

img.alignright {
   margin-left: 1em 0 1em 1em;
}

img.alignleft {
   margin: 1em 1em 1em 0;
}

img.aligncenter{
   display: block;
   margin: 1em auto;
}

img#wpstats {
   display: block;
   margin: 0 auto;
}

img[class*="align"],
img[class*="wp-image-"],
   .gallery .gallery-icon img {
   border: none;
}

.wp-caption {
   margin-bottom: 1em;
   margin-left: 0;
   max-width: 96%;
   text-align: center;
}

.wp-caption img {
   display: block;
   margin: 0 auto;
}

.wp-caption-text {
   position: relative;
   font-size: .8em;
}

.gallery {
   margin: 0 auto;
}

.gallery .gallery-item  {
   margin: 0;
   float: left;
   text-align: center;
   width: 33%;
}

.gallery a img {
   border: none;
}

.gallery-columns-4 .gallery-item {
   width: 25%;
}

.gallery-columns-4 .gallery-item img {
   width: 100%;
   height: auto;
}

.comments ol    {
   padding-left: 0;
}

.comments ol li {
   margin: 0;
}

.comment-author {
   padding: 0;
   text-decoration: none;
}

@media only screen and (max-width: 800px) {

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

}

@media only screen and ( max-width: 650px ) {

   .gallery-columns-3 .gallery-item {
      width: 33.33%;
   }

   .gallery-columns-3 .gallery-item img {
      width: 100%;
      height: auto;
   }

}

@media only screen and (max-width: 480px) {

   .gallery-columns-2 .gallery-item {
      width: 50%;
   }

   .gallery-columns-2 .gallery-item img {
      width: 100%;
      height: auto;
   }

}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Img in sidebar textwidget popsout’ is closed to new replies.