portrait images not displaying correctly - much too tall - css

I have several dynamic lightbox galleries on my site (this is for the revamp of our current site and is not live yet). Everything works, but for some reason, and I cannot for the life of me figure out why, my portrait images are coming out very tall compared to other images in the galleries. This seems to be much worse are very narrow images. Any help with this would be much appreciated.
I have tried to hardcode the height and width, and tried to create a special class in the css. Nothing I have tried has worked. I am using the lightbox2 from Lokesh Dhakar. I contacted him about this issue and he stated it was a css thing and suggested that I post something here for help. I do have screenshots of what I would consider an acceptable portrait image and an unacceptable portrait image.
here is the basic html for the section I am describing:
<div class="gallery1">
<img src="Halloween On The Farm 10-19-08/Photo10.jpg" alt="5th Grade Volunteers" width="185" height="155">
<img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb11.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself">
<img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb12.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself">
here's the css:
.gallery1 {
display: block;
border-radius: 25px 25px 25px 25px;
padding: 10px;
}
.gallery1 img {
border-radius: 25px 25px 25px 25px;
padding: 15px;
width: 200px;
transition: 1.0s;
cursor: pointer;
}
.gallery1 img:hover
{
transform: scale(1.1);
}
The expected results are that the images will display correctly and not much larger than anticipated. So far, my actual results have been no success.

This should do the job (it's the same as background-size: contain only for images instead of background-images):
.gallery1 {
object-fit: contain;
}
Edit: the question was unclear as to the desired result. The actual case was solved by setting a height to the images themselves:
.gallery1 {
display: block;
width: 100%;
border-radius: 25px 25px 25px 25px;
padding: 10px;
}
.gallery1 img {
border-radius: 25px 25px 25px 25px;
padding: 15px;
max-width: 100%;
height: 200px; /* max-height: 200px; */
transition: 1.0s;
cursor: pointer;
}

Related

ioslides: place title logo on the right side

I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.

Why a small CSS dot does not have the same proportions in Chrome?

I'm working on a website that has a 3-dot menu button in the top. Each of these dots is 4 pixels wide and height, has border-radius: 100% and margin set to 2 pixels.
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 100%;
border: 0;
padding: 0;
display: inline-block;
margin: 2px;
}
<div class="dot"></div>
In Chrome 73, it is neither rounded, nor its proportions are 1:1 as you can see on the following picture. It works perfectly, however, on Safari and Firefox.
https://ibin.co/4gvT3AAmOLRr.png
https://ibin.co/4gvTRW3jy4jD.png
Anyone has an idea how to fix it? If I make it bigger or increase the margin, it displays it correctly, but I would like to keep these sizes. Thanks!
-- UPDATE --
This is the minimal code that reproduces the error for me.
<style>
.menu-toggle{
display: flex;
border: 0;
background: transparent
}
.menu-toggle .dot{
background: black;
width: 4px;
height: 4px;
border-radius: 100%;
border:0;
padding: 0;
display: inline-block;
margin: 2px
}
</style>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="dot"></span><span class="dot"></span><span class="dot"></span></button>
</nav><!-- #site-navigation -->
Also, if it helps, I am using MacBook Pro (Retina, 15-inch, Late 2013) with NVIDIA GeForce GT 750M 2 GB, Intel Iris Pro 1536 MB and the external screen is LG 27UD88-W. The error is on both screens.
-- UPDATE 2 --
It does the same problem even if I disable the border-radius, the dots aren't the same width: https://ibin.co/4gvn4EJHniRz.png
Also, I found out, that if I go to inspect mode and I toggle the device, it works perfectly.
border-radius should be 50% for a circular shape.
Also you need to make sure the contents of the circle takes up no space.
As soon as the circle has visible contents, it will turn into a tube (as the width expands).
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 50%;
border: 0;
padding: 0;
font-size: 0;
display: inline-block;
margin: 2px;
}
.wrong {
border-radius: 100%;
}
<div class="dot"></div>
<div class="dot wrong"></div>
I wasn't actually able to reproduce your non-circle, but this may be the browser compensating for your mistake.
The first thing you gotta do is to change your border-radius to 50%. If you still fail to achieve the desired pure circle, try masking it with a single pixel like so:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
I recently came up to the same issue.
People up-top are right. Border-radius should be 50% to make a circle.
In my case background-clip: padding-box; did the trick.
The difference may not be visible in code snippet here but it is visible in my project, especially when zooming in a bit on my browser. (Chrome in my case). Don't know what are the reasons for this minor issue.
Here's the relative CSS Tricks article that helped me.
And a code snippet that utilizes: background-clip: padding-box;
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 50%;
border: 0;
padding: 0;
font-size: 0;
display: inline-block;
margin: 2px;
}
.wrong {
border-radius: 100%;
}
.perfect {
/* Prevent background color leak outs,
helps to create a perfect dot and not a square-ish dot */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
<div class="dot"></div>
<div class="dot wrong"></div>
<div class="dot perfect"></div>

Create an opaque Text box on top of an image?

I am a newbie to both html and css and for the life of me I cannot get this right. Can someone please assist me in coding this?
This is what I have done so far, but now I'm stuck and my image is not showing up at all..
<div class="image"></div>
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship at it’s best.
</p>
</div>
#box1 {
width: 100%;
padding: 100%px;
border: 2px solid navy;
margin: 0px;
background-colour: white;
}
div.image {
background: url(Images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
There are a several wrong things here:
When you set any CSS property like padding you should only use one kind of messure: px, %, em, rem... But not two, as you do in #box1. This is an error.
This is matter of style. When you set a property to 0 is better not set px, nor any kind of messurement units.
Now, your goal.
You want to get your #box1 inside of your .image so you should put one tag inside of another, as you could see on my code. Doing that you will be very close to your solution.
Next thing is centering you #box1. There are a lot of ways to do that, I put here my favourite, but, as always, the best way depends on the situation.
#box1 {
width: 50%;
border: 2px solid navy;
margin: 0 auto;
color: #FFF;
background: navy;
opacity: 0.8;
border-radius: 5px
}
div.image {
padding: 20px;
background: url(http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="image">
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship
at it’s best.
</p>
</div>
</div>
Looks like the outer container will be a background image, then you will have another container to hold the text which will could use the the background-color: RGBA property.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background: url(link/to/image) center center;
background-size: cover;
// Use prefixes
}
.inner-container {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
width: 500px;
margin: 60px auto;
}
Please make sure you explain as much as possible in your example code, SO isn't here to code for you :)
Here is a pretty useful link explaining RBGA
https://css-tricks.com/rgba-browser-support/

Using #mediascreen to center my promoslider pluggin

I have a Wordpress promoslider pluggin on the front of my website which is inside it's own div, the css looks like this:
#content.promoslider {
float: left;
margin-left: 16%;
height: 420px;
width: 840px;
background-color: #3397cc;
margin-top: 20px;
margin-bottom: 35px;
border: none;
}
On my laptop it is centred and looks fine but on different sized monitors (mainly wider ones) it isn't in the center. You can see it on my website's homepage http://designbyiliria.com/
Could some one please tell me how I can use #mediascreen to adjust the margin-left depending on which monitor it is viewed on I'm a bit confused.
Many Thanks
Set the margins to auto if you want it to be centered on varying resolutions.
#content.promoslider {
height: 420px;
width: 840px;
background-color: #3397cc;
margin: 20px auto 35px auto;
border: none;
}

Mobile CSS Overlay Not Appearing Correctly

Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My CSS:
#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}
#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/* border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}
#overlaymatte {
background: none;
}
My HTML
<div id="fixedoverlay">
<div id="overlaymatte"></div>
<div id="overlaycontent">
<div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p></div>
</div>
</div>
Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
function popUpOverlay(){
$('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
$('#overlaycontent').append(loaderimg);
$('#loaderimg').show();
$(window).keydown(function(e){
if(e.keyCode == 27) {
$('#fixedoverlay').remove();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.

Resources