I have absolute positioned image (on the left) with some div's positioned relative in it. On the right side I have div positioned by float: right. Is there any way to resize image when it touches floated div? Not the edge of the browser. For now I made something like this
#media screen and (max-width: 1860px){ .content-image img { max-width: 1250px; } }
#media screen and (max-width: 1780px){ .content-image img { max-width: 1200px; } }
#media screen and (max-width: 1710px){ .content-image img { max-width: 1150px; } }
#media screen and (max-width: 1640px){ .content-image img { max-width: 1100px; } }
#media screen and (max-width: 1570px){ .content-image img { max-width: 1050px; } }
#media screen and (max-width: 1500px){ .content-image img { max-width: 1000px; } }
#media screen and (max-width: 1430px){ .content-image img { max-width: 950px; } }
#media screen and (max-width: 1360px){ .content-image img { max-width: 900px; } }
#media screen and (max-width: 1290px){ .content-image img { max-width: 850px; } }
#media screen and (max-width: 1220px){ .content-image img { max-width: 800px; } }
#media screen and (max-width: 1150px){ .content-image img { max-width: 750px; } }
#media screen and (max-width: 1080px){ .content-image img { max-width: 700px; } }
#media screen and (max-width: 1010px){ .content-image img { max-width: 650px; } }
but maybe there is more cleaner way? And maybe more simplier?
Put the image in a div. For the CSS, use the following:
#image-container {
margin-right: 20%;
position: absolute;
}
#right-div {
float: right;
width: 20%;
}
.content-image {
max-width: 100%;
}
Fiddle
Related
I'm using the react-google-recaptcha package and to make it fit in every screen the only except screens with a width smaller than 347px. I don't know what can i do to make it fit inside the screen because it is an iframe.
Here is how it looks in a 350px screen:
And here it's how it looks in a 320px screen overflowing:
Jsx:
<div className="captcha">
<ReCAPTCHA
sitekey="*********"
onChange={handleCaptcha}
theme="dark"
/>
</div>
Css:
.captcha {
margin: 0 auto;
width: 65%;
margin-bottom: 1rem;
}
#media screen and (max-width: 480px) {
.captcha {
width: 70%;
}
}
#media screen and (max-width: 425px) {
.captcha {
width: 80%;
}
}
#media screen and (max-width: 375px) {
.captcha {
width: 93%;
}
}
#media screen and (max-width: 375px) {
.captcha {
width: 100%;
float: left;
}
}
What worked for me was to add an inline style to the wrapper of the reCaptcha:
<div className="captcha" style={{transform:"scale(0.85)", transformOrigin:"0 0"}}>
<ReCAPTCHA
sitekey="*********"
onChange={handleCaptcha}
theme="dark"
/>
</div>
I am looking for the PrimeNg's equivalent of the Bootstrap's .container class, so my elements can have a reasonable max-width on large or extra large devices.
I finally defined it myself:
.container { margin-left: auto; margin-right: auto; }
#media only screen and (max-width: 767px) { .container { max-width: 100%; } }
#media only screen and (min-width: 768px) { .container { max-width: 740px; } }
#media only screen and (min-width: 992px) { .container { max-width: 980px; } }
#media only screen and (min-width: 1200px) { .container { max-width: 1140px; } }
#media only screen and (min-width: 1400px) { .container { max-width: 1320px; } }
It has the advantage to let you adjust the values to your convenience.
Take a look at the #header container at http://granthoneymoon.com/temp.html
At the browser widths of 360 to 499 the background color of the #header disappears and I have no idea why. It's basically the same css as the other widths! It works fine in dreamweaver, but when actually viewed in a browser (IE or Firefox) the problem surfaces. Any clues as to what's going on???
#media screen and (min-width: 500px) and (max-width: 954px) {
#header {
background-color: #18436C;
min-height: 10px;
overflow: hidden;
}
}
#media screen and (max-width: 499px) and (min-width: 360) {
#header {
background-color: #18436C;
width: 100%;
min-height: 10px;
overflow: hidden;
}
}
#media screen and (max-width: 359px) {
#header {
background-color: #18436C;
width: 100%;
max-width: 360px;
min-height: 10px;
overflow: hidden;
}
}
You're missing the unit for min-width:
#media screen and (max-width: 499px) and (min-width: 360) {
should be:
#media screen and (max-width: 499px) and (min-width: 360px) {
Btw. why don't you separate the common values and avoid so much repetition?
#header {
background-color: #18436C;
min-height: 10px;
overflow: hidden;
}
#media screen and (min-width: 500px) and (max-width: 954px) {
}
#media screen and (max-width: 499px) and (min-width: 360px) {
#header {
width: 100%;
}
}
#media screen and (max-width: 359px) {
#header {
width: 100%;
max-width: 360px;
}
}
I have two columns: .group-left and .group-right. On mobile, I want the right column to be displayed above the left. The code below displays the right column below the left on mobile devices. The height of the right column is variable so I don't think I can use absolute positioning. Is there another way to accomplish this with CSS?
#media all and (min-width: 980px) {
.node-type-new-donate-page .group-left {
width: 47% !important;
min-width:320px;
}
.node-type-new-donate-page .group-right {
width: 48%;
min-width:320px;
float:right;
}
}
#media all and (max-width: 979px) {
.node-type-new-donate-page .group-left {
width: 95%;
min-width:300px;
}
.node-type-new-donate-page .group-right {
width: 95%;
min-width:300px;
}
}
Make sure your divs are in the right order (group-left on top)
<div class="node-type-new-donate-page">
<div class="group-left">go left</div>
<div class="group-right">go right</div>
</div>
Then add float:left to .group-left for your min-width 980px;
#media all and (min-width: 980px) {
.node-type-new-donate-page .group-left {
width: 47% !important;
min-width:320px;
float:left;
}
.node-type-new-donate-page .group-right {
width: 48%;
min-width:320px;
float:right;
}
}
#media all and (max-width: 979px) {
.node-type-new-donate-page .group-left {
width: 95%;
min-width:300px;
}
.node-type-new-donate-page .group-right {
width: 95%;
min-width:300px;
}
}
depending on your layout you might need to use clearfix on your .node-type-new-donate-page
I try to use #media to check height of browser if it less than 600px
I want to set a new max-width and height so what did I do wrong?
or any missing syntax ?? Please advice and help , Thank!
I also have other #media which is work but for height not.
#media only screen and (min-height: 600px){
#book-container{
max-width: 748px;
max-height: 469px;
}
}
#media only screen and (max-width: 500px){
#txt-search{
visibility: hidden;
}
}
#book-container{
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 80%;
max-width: 830px;
max-height: 520px;
/*max-width: 748px;*/
/*max-height: 469px;*/
}
#media only screen and (min-height: 600px) applies for screen widths of over 600 pixels. Generally, you want max-*:
#media only screen and (max-height: 600px) {
…
}