WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 06.04.2019 08:50:24

losttrip
Member

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 09:01:08

grindbatzn
Guest

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 09:25:12

losttrip
Member

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 16:58:40

losttrip
Member

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 21:03:24

grindbatzn
Guest

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

losttrip wrote:

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 06:35:01

losttrip
Member

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 10:31:36

grindbatzn
Guest

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 15:01:16

losttrip
Member

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

I have PM'ed you...

Offline

#9 08.04.2019 10:48:17

grindbatzn
Guest

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 11:34:14

losttrip
Member

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

grindbatzn wrote:

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

Board footer

Powered by FluxBB

up