Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054442

Hi on the video player there is padding present that is showing as a blank space bar
Open
/templates/ja_mood/css/themes/red/template.css

Find

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

Replace it with

.embed-responsive-16by9 {
    padding-bottom: 46.25%;
}

save and check.
For the article image, the image use the 100% width of the container and resized according to the container size. So if the container size is big, it will use the full width of image.

Regards

[rwlfr Friend rwlfrJoin date: February 2015Posts: 44Downloads:40Uploads:5 Thanked: 2 times in 2 posts]

#1054539

thanks for the 46.25% information. It seems to work fine.

I don’t understand the 2nd part of your post, about the container size. What can I change to see the full width ? (in fact it’s more the full height which need to be used).

• This reply was modified 7 years, 3 months ago by  rwlfr.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054601

This reply has been marked as private.

[rwlfr Friend rwlfrJoin date: February 2015Posts: 44Downloads:40Uploads:5 Thanked: 2 times in 2 posts]

#1054625

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054664

Hi
You can change it from the article manager.
Here : http://prntscr.com/g67qii

Regards

[rwlfr Friend rwlfrJoin date: February 2015Posts: 44Downloads:40Uploads:5 Thanked: 2 times in 2 posts]

#1054791

I think you don’t understand the issue.
Let me show you another example :

On this link, the top of the head is cut :
https://www.robbiewilliamslive.com/news/videos-blog/990-vloggie-williams-episode-4-1-titre-inedit

But the image used is this one :
https://www.robbiewilliamslive.com/images/stories/videos/17vloggiewilliams4.jpg

On the image used, the top of the head is not cut.

How can I keep the real size of the Full Article image ?

Thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054839

Hi
The height is set to auto and it fit the container size with respect to width and height. if you will make remove the style it will show the full image but in that case, the image will be the stretch
Open /templates/ja_mood/css/themes/red/template.css
find and remove this code to check

.embed-responsive img.embed-responsive-item {
    height: auto !important;
    -webkit-transform: translate(0px,-25%);
    -ms-transform: translate(0px,-25%);
    -o-transform: translate(0px,-25%);
    transform: translate(0px,-25%);
}

Regards

[rwlfr Friend rwlfrJoin date: February 2015Posts: 44Downloads:40Uploads:5 Thanked: 2 times in 2 posts]

#1056002

Thanks. I tried this code, but in this case the image is streched, yes.

There is no way to keep the proportions, and without cropping the height ?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1056071

Hi
You can set the height as 100%, its shows the full height, there is no such way because it use the 100% width at this time.

Regards

[rwlfr Friend rwlfrJoin date: February 2015Posts: 44Downloads:40Uploads:5 Thanked: 2 times in 2 posts]

#1056125

Ok.
I finally replaced this code :

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  border: 0 none;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.embed-responsive img.embed-responsive-item {
  height: auto !important;
  -webkit-transform: translate(0px, -25%);
  -ms-transform: translate(0px, -25%);
  -o-transform: translate(0px, -25%);
  transform: translate(0px, -25%);
}
.embed-responsive {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

by this code :

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  border: 0 none;
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}
.embed-responsive img.embed-responsive-item {
        height: 100% !important;
        width: 100% !important;
}
.embed-responsive {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.embed-responsive-16by9 {
  padding-bottom: 62.50%;
}

And it seems working fine.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1056155

Great setting 100% width looks working fine.
Thanks for sharing 🙂

Regards

[Author]

Posts