www.angelodias.com.br/blog
My blog has a featured image inside a slider and several images through the post. To solve a problem (images on post bigger than column) I did this:
img {
max-width:450px;
height:auto;
}
The problem is: this code also changes my slideshow max-width to 450px, and that's not good. Is there a way for the CSS to work ONLY inside the post's text?
Example:
<div class="slideshow"> slideshow without custom IMG css, only template css </div>
<div class="entry-content"> post content with custom IMG css and template css</div>
You can try targeting the images use the entry-content container
.entry-content img {
// ....
}
If you use img tag, it will target all images on the page, where .entry-content img will only target the images inside of entry-content elements and that's where your images are and slide show are not.
WordPress allows to add max-width to images, simply go to Settings -> Media
or you can just select the images inside of your content, this should work:
.entry-content img {
max-width: 450px;
height: auto;
}
Related
I just highlighted in yellow where there is a space for thumbnail images of blog posts.
I am sure there is some simple snippet css will help
Because i donot find a setting in blogger
When i looked at the html generated from the browser class="item hentry ... i donot see a thumbnail tag which has img.
Update: I tried the below css hack as well.
.hide-thumbnail .PopularPosts-thumbnail {display: block!important;}
There is no code, i followed the steps in blogger to bring the dynamic views
as mentioned here.
https://www.mayura4ever.com/2012/05/how-to-configure-your-blog-with-dynamic.html
Where i am missing
.sidebar .item.hentry .thumbnail{
display: block !important;
}
.sidebar .item.hentry.selected .thumbnail{
display: block !important;
}
This css fixes it.
This seems simple enough but I am trying to override a style class on an image tag.
A user uploads content and images using the CKEditor wysiwyg. The issue is if the user doesn't resize the image before posting and then I try to show their HTML on the page the image is wider than the container.
How can I override it with CSS?
<p class="post-content text-muted break-text mb-none">
<p><img alt="" src="https://example.com/1234.png" style="height:1598px; width:1594px" /></p
</p
I tried this css but couldn't override it.
<style>
.post-content img {
width:400px !important;
}
</style>
Since this is user-generated content, I can't add a class directly to the img otherwise I would, if that makes sense. Thanks
Your HTML has a <p> tag inside a <p> tag so would likely have rendered as two separate paragraphs, and the one containing the image wouldn't have the .post-content class on it.
Aside from that, you might be best of with this CSS, as this will keep the image at 100% width but no larger than its actual size.
.post-content img {
max-width: 100%;
height: auto !important;
}
My WP Theme gives me a block where I can build in Custom CSS. I need a picture with the right size and not as background before the .primarymenu.
With CSS you can do that this way:
.menu:before {
content: url('https://placeholdit.imgix.net/~text?txtsize=23&bg=990000&txt=Image&w=150&h=150');
}
<div class="menu">Menu</div>
I might not be explaining this too well, but I'm trying to apply the alternating div:nth class to just the indicated div (al-articles), but its getting applied to each child div inside <div class="al-articles"> - any pure css solution? This is for a WP category archive page and I want the post excerpts to have alternating background colors.
Below is the css I'm using
.al-articles {
Padding:0;
}
.al-articles div:nth-child(odd) {
background:#cccac6;
}
.al-articles div:nth-child(even) {
background:#f0eeec;
}
Thanks in advance
This is happening because you're telling the CSS to apply those styles to ALL divs that are children of .al-articles, not the .al-articles div itself.
Try this:
.al-articles:nth-child(odd) {
background:#cccac6;
}
.al-articles:nth-child(even) {
background:#f0eeec;
}
Just give an id to the main div
eg
<div id="main">
Content goes here!!!
</div>
and put inside it whatever you want.
Then to style it:
#main{
style goes here
}
I cannot get the video from Wordpress core to behave responsively.
I'm using the following CSS:
.videocontent {
width: 100%;
height: 100%;
max-width: 1024px;
margin: 0 auto;
}
.wp-video-shortcode {
max-width: 100%;
}
The following HTML using the shortcode doesn't scale to the full size of the containing div:
<div class="videocontent">
<?php
echo do_shortcode('[video webm="http://localhost/dnp/stalker.webm" width=100%]');
?>
</div>
But using HTML directly it works fine:
<div class="videocontent">
<video id="myvideo2" style="width:90%;height:100%;" controls="controls">
<source src="http://localhost/dnp/stalker.webm" type="video/webm"/>
</video>
</div>
I have tried various settings with the shortcode - such as height 100%, height and width 100%, and width 100%.
What am I doing wrong?
Screenshot -> screen shot
Here's an example of the above - try resizing browser
Use following css for WordPress video shortcode output
video{ width: 100%; height: 100%; max-width: 100%; }
.wp-video{width: 100% !important;}
I have been working on a theme and found that when I set max-width for video in the style sheet the WP-embedded video became unresponsive to changes in the browser width.
When WordPress outputs the [video] shortcode it wraps the video in a DIV like:
<div style="width:640px;height:100px">
video here ...
</div>
The width you're passing into the [video] shortcode can't be a percentage. So, you need to put a width formatted like 1030 for example.
<div class="videocontent">
<?php echo do_shortcode('[video webm="..." width="1030"]'); ?>
</div>
Currently you're taking a DIV and styling it to be responsive, but you're putting this outside of WordPress's output of the [video] shortcode. In looking at your example, if you scale the page down we can see that the your responsive video is indeed working. However, the problem is that it won't expand to more than 640px when the site is fully expanded.
So, I'm thinking you just need to make sure the original output of the video on the expanded site is big enough to fill your responsive wrapping div. Does this work?
Note: I picked 1030 because that's how large your content area is on the example you're linking to.
Your width parameter should be an integer instead of a percentage:
width="1140"
instead of
width=100%
according to the codex page on the video shortcode.