I have a problem when I try to reduce the browser window, the photo does not want to fit.
Does anyone have any idea? Thanks for your help.
Link to page:
http://pomyslownia.twsoft.pl/realizacje_post_type/xvd/
before reduce the browser window:
after reduce the browser window:
You can add the following rules to your css:
/* *********************** responsive lightbox */
.lb-outerContainer {
width:100% !important;
max-width:1000px !important;
height:auto !important;
}
.lb-outerContainer IMG {
width:100% !important;
max-width:1000px !important;
height:auto !important;
}
.lb-dataContainer {
width:100% !important;
max-width:1000px !important;
}
This should make Lightbox images responsive.
Related
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I wanna make this calendar height:100%.
I tried to change css:
.calendar{
height:100% !important;
}
.c-grid{
height:100% !important;
}
.c-event-grid{
height:100% !important;
}
But it doesn't work with this css. I want it to be responsive 100%. Currently it is set with specific height.
Here is the jsfiddle.
By inspecting the fiddle, you can see that the reason for the calendar not stretching to the bottom is that it's actual parents don't.
If you add the following, it does as expected:
body, html {
height: 100%
}
body height is 0.Try this. It works in jsfiddle.
body{
height:100vh;
}
.calendar{
height:100% !important;
}
i want to make my site's logo responsive, i work on joomla 3x and my dafault template is gk_magazine.
i tried this:
#gkLogo.cssLogo {
background: #4d90fe url(../images/logo.png)
no-repeat 0 0;
max-width:100% !important;
max-height:auto;
display: block;
margin: 0;
}
but my logo appears to small. I need help! Thanx in advance
Use Background-size property.
Background-size:272px 120px; /* for original size /
Background-size:100%; / to fill the width of the parent div/element */
Refer http://www.w3schools.com/cssref/css3_pr_background-size.asp
How do I make my background image in the body not to crop when it resizes the window? The site it responsive and the image dosen't resize it juts crops off bits of it. I tried using position:fixed but it didn't work. What code do you need to help me?
This it the code for that wrapper:
.body-wrapper {
background-image: url('http://promegaekonomi.se/wp-content/uploads/2014/09/82.png') !important;
background-repeat: no-repeat;
background-size:100% auto;
}
http://jsfiddle.net/yg17acL0/
Try to use the img tag inside the div.
.responsive {
max-width: 100%;
height: auto;
}
Try this CSS: background-size:contain
Working LINK
(Updated)
I am still trying to get the hang of responsive web design.
I am not able to get the header images to scale as the browser gets smaller.
This is the site,
http://instreamenergy.com/strategic-partnerships/
if I try to make the .header-image #header #title-area height:100% or anything else it just reverts to 20px or something and is stuck there.
Any tips would be awesome!
thanks
I think you're looking for the CSS3 property, background-size
since your image is a background image for a DIV.
Stretch and scale CSS background
http://caniuse.com/background-img-opts
If you were using an image tag, <img> you could do this:
img {
max-width: 100%;
}
You also need to get rid of some of the cruft in your CSS for #title-area. Doesn't look like it needs to be floated: left; or have overflow: hidden;. Removed width, changed height to min-height. no-repeat added to background.
I would update it to:
#title-area {
background: url(your-image.jpg) no-repeat;
padding-left: 0;
min-height: 386px;
float: none;
overflow: visible;
background-size: 100% auto;
}