the slider is located here bxslider location
The slide picture has 652px. This means that i should be able to fit in 4 thumbnail pictures in a row under it each with 163px, somehow the 4 thumbnail picture add up to 653px. Why?
The problem begins with this container:
<div class="small-12 large-8 columns no-padding-left" role="slider">
Who has the width set to 66.66667% ... That % acordding with the Google developer tools is 651.656px then you can't take this value as 652px.
What you can do is set the width to the a tag:
.bx-pager a{
width:25%;
}
And for the img :
#bx-pager img {
width:100%;
}
The width of the parent div is actually 651.656px x 214px. So the large slide picture is 652px, which is just slightly larger than the actual size.
The 4 smaller pictures will add up to be 652px and thus move the 4th one to the next row.
If you wanted the 4 thumbnail pictures to be on the same row, then you shouldn't use width: 66.66667% under class .large-8. Also, by changing the horizontal size of the browser, it will move your image slider to the next line and cause your sidebar to stretch. Having something like:
#sidebar {
max-width: 333px;
}
could prevent that as well as allow it to change widths if the screen gets to a certain point.
Related
Assume:
you have an image that is wider than the screen into which you want to add it.
you must not allow the image to be resized to fit the width of the rendered result's screen.
you don't want to need to specify manually the px size of any element to match the size of the original image.
you may specify an arbitrary px size that you'd not need to update depending on new images that you might want to add to the document.
All markdown previews or outputs that I've seen automatically resize your image to fit the screen horizontally. Intellij, Ms Visual Code, Github...
I dug into the deepest recesses of the Internet and could find rare people asking about this and no answer that works for my use case.
Looks like with pure markdown it is impossible at the moment of this writing.
With HTML+CSS I can almost make it work playing with one or more of the following:
// on divs containing the image
overflow: ...;
overflow-x: ...;
width: ...;
max-width: ...;
display: ...;
// on the image
object-fit: none; // with this the image gets cropped unless you force the width of some container to be bigger than the width of the image (in px values)
float:...;
The closest that I could get is:
<style>
div.outerDivImg {
overflow: scroll;
// without this, the container grows in height and your horizontal scrollbar gets far down
// so it obligates you to scroll all the way down to be able to move the horizontal scrollbar.
max-height: 100vh;
}
div.innerDivImg {
// if you remove below, the image gets resized.
// if you remove below and put "object-fit: none;" on the img, it gets cropped to fit the screen.
width: 8000px;
}
</style>
<div class="outerDivImg">
<div class="innerDivImg">
<img class="innerImg" src='img/German-Cheatsheet.jpg'></img>
</div>
</div>
But this has the side effect of producing a horizontal bar for the div that goes further to the right than the inner image.
Cheers
I'm testing out the following game (repo here) which has been set to the following css properties:
.game {
min-width:400px;
max-width: 660px;
margin: auto;
}
The game app has 16 divs with class=container, and inside each of these there is a div class=card that has 2 figures (one with a class = "front" and one with class = "back") - see screenshot from Chrome Inspector tools below
The class=front parts of the cards have been given an image each, defined by the following url() code example in the css file
[data-card-type="B2"] .front {
background: #f5f5f5 url('../img/img4.jpg');
}
When resizing the whole window where my game is, I can see that the div containers also get resized, affecting the content inside them. This causes the images to get cropped so that only a portion of them shows:
Only when the div containers are at their full size, the images inside them are able to show fully.
I've tried to modify lots of different css variables (eg. setting a min width for the div containers, or for the front class) to stop the images from being "cropped", see below example for the class:
.front {
background-color: #ffb3b3;
min-width:100%
}
but none of these changes have worked.
Where exactly do I need to modify the code so the images stop cropping, and always show a responsive resizing (eg. get smaller or bigger but always show the whole image content)?
If the aspect ratio is right, I think you could use background-size: contain; in the figure css
I want the position of the banner image to change on smaller screens - max-width 414px. I want to show the product (a building) which is on the far right of the image. On wider screens the building appears.
I've made it work in the developer tool by changing the position in the style : left:-1077.383px; .
Here is the code where the banner is located (with the adjusted left position). I'm having a difficult time display the code block, so I hope these will suffice:
Screenshot of code
view-source:http://digitalponddesign.com/utestua/utestua.html
In my media query, how do I target this element so I can adjust the left position on screens smaller than 414px.
I have targeted the image-container content-fill and first classes, to no avail :(
How can I target this element in my media query to make this work)
I have created a media query:
<style>
#media only screen and(max-width:414px) {
/* not working */
.image-container {
left: -1077.383px;
}
}
</style>
The website is https://utestua.no/
Thanks in advance :)
Squarespace allows you to set the focal point of an image so that, as screen and containing-element sizes change, a specific part of the image can remain in view.
In the place where you add the image, you will see a small circle that defaults to the middle of the image. That circle can be dragged around. In your case, drag it to the area with the building (though you'll probably want to keep it vertically centered, you can play with it a bit until you get it where you want it).
If, however, you are sure you want to leave the focal point in the middle but override the position values via CSS, then you could use the following, which will keep the image positioned so that the right side is always visible:
.image-container[data-url-id='top'] img {
position: absolute !important;
right: 0 !important;
left: auto !important;
}
In my website I have a row containing 3 images - http://icestartup.com/testsites/site248gfj/. You will be able to see it if you click on the main menu item called "ruimtes".
The 3 images are not having the same height. If i change my screen size the height keeps varying as well. I would like the 3 images to be of same height so that it looks aligned.
PS: I tried to use the CSS: height: 275px; but the image gets stretched! I don't like that. What i wanted was the image to be of same height without changing aspect ratio.
I am stuck with this CSS for an hour. Any idea folks?
Try max-height: 242px; This will work.!
I was wondering of some one can give me a hand on a little thing. I working on a personal project and can't get one thing of it correct.
Here is the JSBin http://jsbin.com/inixuf/1/edit
The problem is in images, if the screen is smaller then 21" and say is 15.3" it will only show 3 images per row while on 21" it will show 4 images per row and as you get bigger it will show more and more. This is not what I wan't I want a script that can force re-size the image div class in order to assure that no matter what's you're screen you will always be getting 4 images per row.
Any suggestions?
use % to set the widths.
So an image is width:20% of div width, with a margin of 2.5% on each side of the image. That way you fill up the 100% nicely.
.imagecontainer {
width: 20%;
margin-left:2.5%;
margin-right:2.5%;
}
and then have all sizes be relative