-
Posts
-
https://kriesi.at/support/topic/big-preview-img-css-definition-has-added-width-100-why/
Sorry, need to re-visit this as the previous solution suggested doesn’t work in all cases.
To re-cap:
* In Enfold 4.0.3 (or maybe earlier, but it’s not in 3.8.5) a new CSS definition of width:100% has been added to the .big-preview img declaration in layout.css, line 2075. (Compare to line 2036 in v3.8.5, there is no ‘width’ definition).* The result is that all Featured Images when displayed in a post via <div class=”big-preview single-big”> are now being expanded from the defined 700 px to the full width of entry-content-wrapper, which is 883.3 px wide.
The problem is that not all Featured Images are 700 px wide, some are smaller e.g. 467 px. So now when a 467 px FI is used, the max-width suggestion is expanding the 467 px image to 700 px, whereas I want it to stay at 467 px.
So the previous suggestion of
.big-preview.single-big img { max-width: 700px !important; }needs to change but I’m not sure which of
.big-preview img { width: auto; }or
.big-preview img { width: inherit; }to override the line in layout.css and keep the FI at its actual uploaded size is the correct solution. Can you advise?
Hey zimbo,
you can use a plugin like https://wordpress.org/plugins/simple-image-sizes/ to control WP image sizes. Don’t forget to regenerate thumbnails after making changes.
Best regards,
AndyI have that plugin installed and WP image sizing is not the problem.
Enfold is now automatically enlarging a Featured Image from its standard defined size of 700px x 467px due to width: 100%; having been added to the .big-preview img declaration in layout.css, line 2075, a change introduced in v.4.0.3.
I want to stop that enlarging process.
.big-preview.single-big img { max-width: 700px !important; }, as previously suggested, does not work for cases where the FI is smaller than the usual 700px width – such smaller FIs get enlarged to 700px.
Which of these two CSS options is the correct one to keep all the FIs at their “proper” size?
1: .big-preview img { width: auto; }
2: .big-preview img { width: inherit; }
Hi,
Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
AndyThis post has a Featured Image of the ‘normal’ size, 700px x 467px. It has this code
.big-preview img { width: auto; }in a child theme style.css to override the width: 100% in layout.css, for the FI to display at its ‘proper’ defined size. If you use Developer Tools to temporarily turn off this child declaration you will see the FI fill the whole of the outer entry-content-wrapper container (not what is required).
This other post has a FI of 467px x 467px. It is displaying at that ‘proper’ size – which is what I want – because of the child CSS override above. Again, turn this off temporarily and the 467px wide image fills the whole container.
So you can see that I have managed to override width:100% in layout.css.
Sometimes however an FI will be another smaller size so I need a solution that works for all FI image sizes i.e. stop the enlargement to fill the outer container, and my question is whether I have done it in the right way with width:auto or is another CSS statement a better / correct way e.g. inherit?
- You must be logged in to reply to this topic.