Great! Let me add a bit of width then.
Thanks again for the exceptional responsiveness… Thanks a lot.
You’re welcome 🙂
If you’re happy with Tracks, could you take just a minute to leave a review? I would really appreciate it.
Thanks!
Hello Ben!
I’ll be happy to add a review, of course!
I was going through older articles, and it seems one of the css codes had some unintentional effects on some elements. See the pull-quote section in the following link:
http://www.samvriti.com/2013/05/10/merleau-ponty-parole-and-pensee/
The actual quotation marks look huge…! They are basically png files that I had designed, and which I placed in two of the angles of a floating table cell. Their normal size is around 50 px large, which is indicated in the html coding, just like their actual placement (left or right within the cell).
I did some tests and it appears that this change came from the line:
width: 100% !important;
in the code
.entry-content table img {
width: 100% !important;
max-width: none !important;
}
I am not able to understand the problem, since the quotation marks designs are set at the desired size, and it worked just fine before this code was added…
One solution would perhaps be to “lock” the growth of these images by placing them in other floating table… within the main floating table of the pull-quote. What do you think?
Or perhaps another css solution that would avoid this effect?
Thanks again!
Samuel
Great!
There are a few approaches we can take to fix this. I think the easiest will be to add a class to the tables that you want affected by the above CSS.
The first step is to add a class attribute to the tables we previously edited like this:
<table class="large-images">
You can call the class whatever you’d like. I’m just going to use “large-images” in my example.
Once the class has been added to each of the tables you want affected by the previous CSS, you can then update the CSS to read like this:
.entry-content .large-images img {
width: 100% !important;
max-width: none !important;
}
Now instead of targeting all images (img) in tables (table) in the post content (.entry-content), that code will only target images in elements that have a “large-images” class.
The result will be that your tables we previously edited will look the same, and the pull quotes will no longer be affected allowing them to return to their normal size.
Wonderful Ben – once again a very effective and elegant solution… Great, I am really happy.
And in the process I am gaining some clarity as to the way CSS works!
It should be all for now – thanks again for your patience! Going to leave a review just now 🙂
Samuel
No problem, thanks so much for the review!
Hello Ben,
A quick question for the same page, but a different problem.
I would like to have the option to display the link texts underlined by default, and without underlining on some specific cases.
Similarly to the previous point we discussed, I tried to apply
class="no-underline"
onto a few codes in this page, and then to change the css code into this:
.entry-content .no-underline a {
text-decoration: none;
color: #606060;
}
But the exception is not applying… Is there a mistake in the logic, or in the code?
Thank you!
Samuel
The previous message should read as follows:
… onto a few
<a ...>
codes in this page…
It’s very close, there’s just one part that needs to be changed:
.entry-content .no-underline {
text-decoration: none;
color: #606060;
}
Since the class is added to the “a” element, you can leave off the “a” selector at the end. Otherwise, the code says that the “a” element should be contained in the .no-underline element. The code above tell the browser to target any element with the .no-underline class inside the post content which will only be the links you gave that class to.
Hi Ben,
Happy new year 🙂
Little question regarding a tweaking you suggested a few months back:
<table class=”large-images”>
It has been working great. But I would like to place an image smaller (68 px) within a cell that is larger (570 px).
By default, the small image is stretched hugely, I guess till the edges of that cell. I presume that is the automatic command of the “large-images” code, right?
I also tried to create sub columns within this cell, in order to get a small column at the centre, with the width of this particular image: 68 px. But it has broken the various cells and columns alignments. Another rendering is that the 68 px appears much smaller – around 30 px large.
Is there a code that we could add to this particular td cell, so that even though the whole table works under “large-images”, this one could be an exception? I guess that would be the easiest solution…
Thank you!
Samuel
Hey Samuel,
Happy new year!
Yea that can be done. Check out this CSS:
.entry-content .large-images .small-image img {
width: auto !important;
}
The table will still make all images the full-width of the cell, but the code above will override it for any image in a “td” element that has a “small-image” class. Or, you could even add the “small-image” class to a “tr” element if you wanted a whole row of smaller images.
The code above will make the image use its natural dimensions, but you can also set it to a specific px value.
Wonderful – thanks again Ben! As always 🙂
The image is of the right size. However it automatically aligns left in the cell, even if with the “aligncenter” class. I guess there is some small command to add in the CSS?
Thank you!
Hmm okay try adding the following to the previous snippet:
.entry-content .large-images .small-image img {
width: auto !important;
margin-left: auto;
margin-right: auto;
}
.entry-content .large-images .small-image {
text-align: center;
}
