I am making a parallax site using http://keithclark.co.uk/articles/pure-css-parallax-websites/.
I have finished it all and looks great, but if i resize my screen window all items inside go over each other. My question now is how can i make a responsive that 'deletes' the paralax when the screen size is about an ipad size or smaller. So that i have 'normal' pages.
Just wrap your code with a #media query, e. g.:
#media (min-width: 700px) {
// your code
}
Then this code will only apply on a screen with a min-width: 700px.
Related
By the way, I would like my cards in the most popular ones to stop decreasing in size from a resolution of 400px I tried to add a min-width on the card container but with all that the result is nothing.
#media screen and (max-width: 400px) {
.aside-container {
min-width: 400px;
}
}
I don't want my card to decrease in size from 400px
You are using a media query that will only work when your screen is less than 400px wide. You might want to remove that, or maybe you meant min-width?
Notice, that actual rule that is applied to your .aside-container is (max-width: 786px).
I believe that rule #media screen and (max-width: 400px) { is placed before (max-width: 786px) rule in your queries.css. Try to move code down to end of file so needed rule will be last applied to element.
I have no time to verify it right now but I'll get to computer later so I'll check it.
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
I have a website. The content is set to 960px wide and devices that are wider than that see the solid colored body element. I am trying to add a background-image to that body, but I only want it to load on devices that can see the body, so that other devices don't need to waste time loading it if they can't see it.
For example, my viewport meta tag is set to a static 960px (I know it's not recommended), so phones won't be able to see the body because they are automatically scaled to 960px in width.
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
Do you mean this?
body{
background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}
#media only screen and (max-width: 960px) {
body{
background:none;
}
}
DEMO
If you resize your browser the body background image will gone.
I have a website where when the screen goes above 1400px; the website no longer expands. However, I also have a floating element. the navbar is floated to the left and scales down in size with the page. However, I don't wamt it to style if the screen size gets larger.
If someone views my page above 1400px screen resolution it works and does not move. However, if someone views the website and zooms out increasing the viewport size not the screen size it stays stuck to the left hand side and distorts.
I want a div to display:none if the screen size or the viewport size reaches a maximum size of 1400px;
I need compatibility for modern browsers and mobile devices.
you can try this...
#media screen and (max-width: 1400px){
div {
display:none;
}
}
#media (min-width: 1400px) {
body {
background:red !important;
}
}
works for me :)
EDIT: sorry missed the part about zooming the page. i'm not sure viewport is supposed to work like that?