I'm trying to prevent the html page from moving, resizing while width page is under 1350 px.
Btw on my css code, for the width, height, transformation: translate, i'm using the value vmax , and not px or %. So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax, so they just adapt there size with the window size too.. :(
I tried this but this doesn't work too (I was trying to stop resizing the three white rectangle, tabcmp0, 1 and 2)
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
}
#tabcmp1 {
width: 370px;
}
#tabcmp2 {
width: 370px;
}
body {
max-width: 1350px;
}
}
Code + preview
See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...
i think there is no choice to return px model if you want to create a static content there.
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
height:580px;
left:210px;
}
#tabcmp1 {
width: 370px;
height:580px;
left:590px;
}
#tabcmp2 {
width: 370px;
height:580px;
left:980px;
}
.select_dev {
width:202.5px;
}
body {
max-width: 1350px;
}
}
i think you should give all exact px values instead of dynamic vmax values like that for each element like headers, left menu etc...
Related
I'm trying to make a carousel slide, but when I'm using object-fit:cover and adding the second image the first and the second image width are changing from 100% to 50%
on 1 input it works fine
See photo here
on second input it's changing its width
See photo2 here
I think the object-fit:cover property can be set with the width property.
image {
width: 100%;
object-fit: cover;
}
Then the image places appropriately so that it's width is 100%.
If you really want img to be 100% in flex layout you can use one of these options:
img {
width: 100%;
flex-shrink: 0;
}
img {
min-width: 100%;
}
If smth else - update/improve your question
I have a function to determine the height of the page, so that the page always stays at the maximum size regardless of the device, without scrolling.
I first take the maximum height of let s = $ (document) .height and then the height of all other elements, such as the header, main footer and footer. I subtract the value of all items by the variable s, which contains the height total. I assign the result to the main height value, so the page is the way I want it.
However, when I change the device to chrome inspection feature, or I leave it in landscape, the page is irregular. So be sure to reload, try using windows.resize by calling a function, but it doesn't adjust, just reloads. I don't know what to do.
I call the function like this:
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};
Any reason you couldn't use css to accomplish this? height: 100vh will keep an element at the viewport height even when resized, and using flex or grid you could stretch and scale the main layout elements however you need them.
body {
margin: 0;
text-align: center;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
background: aliceblue;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
background: lightblue;
}
<section class="container">
<header><h1>header</h1></header>
<div class="content">content</div>
<footer>Footer</footer>
</section>
I'm stuck on a problem, it's creating an image grid and I can't figure out how to start laying out items on the next line when I reach the end of the container. I'm aware I could use masonry but the problem with that is my gallery needs to be full width and with masonry, you get that 1px whitespace issue masonry 1px issue. and just using regular floats also won't work for me because my items have varying heights. any thoughts on how I could tackle this issue would be awesome
function layout() {
var itemPos = 0;
var itemHeight = [];
$('.gallery__item-list .gallery__item').each(function(index) {
itemHeight.push($(this).height());
$(this).css({
transform: "translate3d(" + itemPos + "px,0px,0)"
});
itemPos += $(this).width();
});
}
css
.gallery__item,.grid-sizer {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#media screen and (min-width: 400px) {
.gallery__item,.grid-sizer {
width: 50%;} }
#media screen and (min-width: 600px) {
.gallery__item,.grid-sizer {
width: 33.333%;}
.gallery__item--body-posts{
margin-bottom: 0px;
} }
#media screen and (min-width: 1000px) {
.gallery__item,.grid-sizer {
width: 25%;
} }
You can set image width in percentage if that allows in your case. Suppose you have three images in a row you can set width:33% which will take the full width of a row. So according to count you should change the width of images. When you get first three images in row, next three will come in the second row.
I hope this solves your problem
I'm using Highcharts to render charts on webpage. Now I found an issue if I use min-width and max-width CSS option on container div:
<div id="container" style="min-width: 310px; max-width: 960px; height:400px;"></div>
I added a background image with this method:
Highcharts.theme = {
chart: {
backgroundColor: '#FFFFFF',
plotBackgroundImage: '/path/to/mybackgroundimage.png'
}
};
This image has 960px width and 400px height and it shows well on desktops, but if I check it on mobile devices the image's apect ratio has gone and the image become distorted.
Is there a backgroundSize:'cover' or something like this to fix the image position and size on different screen widths?
You can disable the plotBackgroundImage parameter and set the backgroundColor as transparent. Then apply the background img in CSS (for the container).
CSS
#container {
background:url(https://www.highcharts.com/samples/graphics/skies.jpg) 0% 0%;
background-size:cover;
}
chart:
chart: {
backgroundColor: 'rgba(0,0,0,0)',
type: 'line'
}
Example
- http://jsfiddle.net/4q7atyt9/
I think you can use rem instead of px.
rem is called "root em" can change the size depend on the screen size.
<div id="container" style="min-width: 20rem; max-width: 60rem; height:15rem;"></div>
Note:
10px = 0.625rem;
16px = 1rem;
in your css
#media screen and (min-width: 480px) and (max-width:980px) {
#container {
min-width: 20rem; //change the size
max-width: 60rem;
height: 15rem;
}
}
I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:
You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}
You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.