i have 4 inputs which have to be lined one after another and with the decrease in screenwidth the input box should move to next line and also width should be divided equally between 4 inputs and it get adjusted respectively to the screenwidth. smaller the screen the inputs will start looking like one below the other..
sharing the sandbox link herethis is what all i have tried..
edit: no harcoded width, it should be equally distrubuted to 4 inputs
You need to add a proper border-box, so your inputs will not overflow their container:
html {
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
}
After that, you can set width: 25% to input containers, add small horizontal paddings and remove margin-right. Later you can set width to 50% and 100% with the help of media queries for specific screen sizes:
#media (max-width: 767px) {
.input-division {
width: 50%;
}
}
#media (max-width: 479px) {
.input-division {
width: 100%;
}
}
Related
I'm looking for CSS rules that allow setting fixed element width (let's say width: 500px), but combines it with max-width: 100% if a container is narrower than the element.
I'm thinking about something similar to:
.elem {
width: 600px;
max-width: 100%;
}
This snippet works perfect - if a .elem's container is narrower than the .elem itself, the .elem has container's width - smaller than 600px.
How to achieve the same effect with min-width? The following snippet doesn't work:
.elem {
min-width: 600px;
max-width: 100%;
}
Maybe any ideas using CSS Grid or even JavaScript?
Are you looking for someting alike :
body {
margin: 0;
}
div {
/* demo purpose */
width: 90%;
margin: auto;
padding: 1em;
border: solid;
/* flex optionnal */
display: flex;
flex-wrap: wrap;
gap: 1em;
}
button {
min-width: clamp(320px, 600px, 100%);
}
<div class>
<button>hello</button>
<button> hello hello hello</button>
<button> hello hello hello hello hello hello hello hello hello hello hello hello</button>
</div>
320px (can be 0 to X ) is the min-width you agree width, 600px the max-width you allow and 100% the limit not to pass.
here is a pen to test and play with : https://codepen.io/gc-nomade/pen/bGqyJmL
Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.
clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
min-width cannot overwrite width in your written code, I think same as #dantheman. you might looking for width: 100%; max-width: 600px min-width: 320px.
It will take the whole container but not higher than 600px and not smaller than 320px.
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...
I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.
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 have a need to print pages from a web app on to 8" x 4" index cards. IE doesn't save print settings from one print to the next, so is there a way to programmatically force the print set up?
Look at this CSS3 examples from http://www.w3.org/TR/css3-page/#size:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
/* A4 Landscape*/
#page {
size: A4 landscape;
margin: 10%;
}
You can do this in CSS using the #media print directive, no js required. You'll have to calculate what sizes relate to a 4x8 index card and do all the positioning yourself, but it will work. Also, since this is CSS2 it won't work in IE6. (see Joel's comments)
#media print {
body {
width: /*width of index card*/
height: /*height of index card*/
}
/* etc */
}