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.
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>
Hello everyone
I'm using a 'main' media query to target all major changes form desktop to mobile with this (scss) :
// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;
#media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
.contact-indicator {
display: none;
}
.hero-wrap {
margin-top: 70px;
overflow-x: hidden;
// disable left side of the hero
.left-side {
display: none;
.main-img {
display: none;
}
.hero-arrow {
display: none;
}
}
// disable the right side of the hero
.right-side {
display: none;
.main-heading {
display: none;
}
.hero-descrip {
display: none;
}
.button-wrap {
display: none;
.hero-btn {
display: none;
}
.btn-arrow {
display: none;
}
}
}
.mobile-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.flex-left {
min-width: 100vw;
width: 100vw;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.mobile-h2 {
position: absolute;
right: 19px;
font-size: 33px;
font-weight: 300;
text-align: right;
max-width: 298px;
width: 298px;
min-width: 298px;
margin: 8px 0 0 0;
padding: 0;
}
.mobile-hero-img {
max-width: 355px;
margin-right: -140px;
}
}
.mobile-hero-p {
margin-left: -45px;
font-size: 15.5px;
margin-top: 55px;
max-width: 272px;
line-height: 26px;
}
.mobile-hero-btn {
margin-top: 45px;
min-width: 191px;
max-width: 191px;
min-height: 53px;
height: 53px;
max-height: 53px;
border-radius: 14.5px;
background-color: $grid-black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
}
}
And then, when I'm trying to be more specific with the viewports like this:
// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (min-height: 667px) and (max-height: 667px) {
.hero-wrap {
margin-top: 65px;
}
.mobile-title {
.mobile-hero-p {
margin-top: 40px;
}
}
}
// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (max-height: 812px) {
.mobile-title {
.mobile-hero-p {
margin-top: 70px;
}
}
}
The last two media queries don't seem to get registered.
If it helps, all the code is available on github : https://github.com/DesignedByNino/gridbase-studio in the 'src' folder under 'css/index.scss'.
This project uses vue.js - but it's not exactly relevant to the question, just so you know if you take a look.
Thank you in advance for all the answers!
As mdn says:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width, which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
and then you can use your media queries:
#media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}
UPDATE:
I've created a simplified sample:
#media screen and (min-width: 320px) and (max-width: 1020px)
and (min-height: 813px)
{
.mobile-title {
background-color: lightgreen;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 0px) and (max-height: 667px) {
.mobile-title {
background-color: lightpink;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 668px) and (max-height: 812px) {
.mobile-title {
background-color: lightgoldenrodyellow;
}
}
<div class="mobile-title">
A title
</div>
After some time in Chrome Dev Tools, I found out that the styles I was trying to target with the device specific media queries were not registering because I was not specific enough in SCSS with the last media queries.
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 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
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) {
…
}