WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
When I set images to display "All thumbnails will have the same height. They will not be cropped, but their width will be adjusted."
Everything looks great... until I get to the smaller screen display.
The image element style height of 201px is overridden when an explicit height of 90px is placed on each image because of this line in responsiveFG\scripts\mixed-width\mixed-width.css
[== CSS ==]
/* Smaller Screens */
@media screen and (max-width: 500px) {
.mixedwidthouter .fg_design ul li {width: auto ! important; }
.mixedwidthouter .fg_design ul li a img {width: auto ! important; }
.justifypicsspacer, .mixedwidthouter .fg_wrapper ul.photostyle li, .mixedwidthouter .fg_wrapper ul.photostyle li a img {height: 90px !important; }
}
You can see the change take effect and the results here:
If I comment out this style override, then everything continues to look great on the small screen.
My question is - is there an intended reason for this style override to exist?
Offline
Maybe there is some other rule in your Template, something like (eg) max-width: 100%..
I do not have a max-width set in my template.
The max-width is also set explicitly in responsiveFG\scripts\mixed-width\mixed-width.css
[== CSS ==]
.mixedwidthouter .fg_wrapper ul.photostyle li a img, .mixedwidthouter .fg_wrapper ul.categories li a img {
width: auto ! important;
max-width:600px ! important;
float:left;
}
I also now notice that as I resize my window width down, the element width goes down, but the img height has to stay at 90px, so the images crop on the sides.
element {
opacity: 1;
/*height: 201px;*/
width: 129px;
margin-left: 0px;
}
.justifypicsspacer, .mixedwidthouter .fg_wrapper ul.photostyle li, .mixedwidthouter .fg_wrapper ul.photostyle li a img {
height: 90px !important;
}
[== HTML ==]
<li class="group nextrow" style="opacity: 1; height: 201px; width: 129px; margin-left: 0px;"><a data-size="1144x1400" id="pic_2_93" data-comment="3_93" data-thumb="249x305" href="http://localhost:4001/mysite/media/plant_gallery/Photo_1553697262132.jpg" class="rfg_thumb_a" rel="rfg_thumb" title="" target="_blank"><img src="http://localhost:4001/mysite/media/plant_gallery/fg-thumbs/Photo_1553697262132.jpg?trf=1554531112" alt="" style="width: 217px; height: 201px; margin-left: -17.5px;"></a></li>
Offline
I am wondering if this is an unfortunate result of EVERY image being in portrait mode.
Offline
I am wondering if this is an unfortunate result of EVERY image being in portrait mode.
No, it works with all templates and also portrait images.
Do you have an URL where I can check this?
I am working locally, so I don't have a page I can share.
But I did try switching my template to Hortal (WBCE) and I get the same issue happening:
I have done some experimenting and it appears that this happens, or at least it is more obvious, when you select a height larger than around 150px. I had mine set to 306px (this is one of the numbers which it landed on by clicking the + button) and the horizontal spacing of the <a> tag is visibly wider than the image, which is constrained to 90px height by that media query style.
Offline
As you see, the problem ist NOT in the picture size, but in the width of the <li>-Element: Its much too wide.
So maybe there is a CSS-Rule for <li> Elements, which causes this problem. But I cannot say something without an URL.
I have PM'ed you...
Offline
I cant find the mistake.. seems like there are different versions of rFG
I am using this Gallery for a lot of sites, also some private ptojects:
https://prinzenreich.com/cms/h0f/kims-atommuehle.php
The only solution seems to be to remove this lines in
mixed-width.css Line 85
@media screen and (max-width: 500px)
.justifypicsspacer, .mixedwidthouter .fg_wrapper ul.photostyle li, .mixedwidthouter .fg_wrapper ul.photostyle li a img {
height: 90px !important;
}
The only solution seems to be to remove this lines in
mixed-width.css Line 85@media screen and (max-width: 500px)
.justifypicsspacer, .mixedwidthouter .fg_wrapper ul.photostyle li, .mixedwidthouter .fg_wrapper ul.photostyle li a img {
height: 90px !important;
}
Yes, that is what I said in my original post.
I am using version 0.75 from here - https://addons.wbce.org/pages/addons.ph … em&item=18
What version are you using?
Offline