WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 06.04.2019 07:50:24

losttrip
Mitglied

RFG thumbnails same height do not display nicely on smaller screen

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:

Desmonstrate image display issue

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

#2 06.04.2019 08:01:08

grindbatzn
Gast

Re: RFG thumbnails same height do not display nicely on smaller screen

Maybe there is some other rule in your Template, something like (eg) max-width: 100%..

#3 06.04.2019 08:25:12

losttrip
Mitglied

Re: RFG thumbnails same height do not display nicely on smaller screen

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

#4 06.04.2019 15:58:40

losttrip
Mitglied

Re: RFG thumbnails same height do not display nicely on smaller screen

I am wondering if this is an unfortunate result of EVERY image being in portrait mode.

Offline

#5 06.04.2019 20:03:24

grindbatzn
Gast

Re: RFG thumbnails same height do not display nicely on smaller screen

losttrip schrieb:

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?

#6 07.04.2019 05:35:01

losttrip
Mitglied

Re: RFG thumbnails same height do not display nicely on smaller screen

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:
hortal rfg

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.
rfg

Offline

#7 07.04.2019 09:31:36

grindbatzn
Gast

Re: RFG thumbnails same height do not display nicely on smaller screen

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.

#8 07.04.2019 14:01:16

losttrip
Mitglied

Re: RFG thumbnails same height do not display nicely on smaller screen

I have PM'ed you...

Offline

#9 08.04.2019 09:48:17

grindbatzn
Gast

Re: RFG thumbnails same height do not display nicely on smaller screen

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;
}

#10 08.04.2019 10:34:14

losttrip
Mitglied

Re: RFG thumbnails same height do not display nicely on smaller screen

grindbatzn schrieb:

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

Fußzeile des Forums

up