i want prevent show my website in small screens same as mobile or tablet...
and i want to show message in this screen that open my site in large screen
How can I do this?
Set width and height using media queries like this
#media screen and (max-width:360px) and (max-height:520px){
body{
display:none
}
}
pen is here with resizable window
Use media queries:
//the css inside this block will only be applied to devices with less than 800px width
#media (max-width: 800px) {
//add css here to show the message to open the webpage on a device with a larger screen
}
You can learn more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
As you have tagged wordpress: You can add custom css where you can configure your themes.
Related
I'm trying to hide a image in my website for all the mobile devices. This is a html based website.
http://www.onefourbase.com/
I've tried few ways, but no help. Can you guys please help me to get it to the work?
<div class="choseImg">
<img src="images/chose.png" alt="">
</div>
Have you tried media queries and hide image? Please mention what have you tried.
You can try below:
#media
only screen and (max-width: 767px) {
.choseImg{
display:none;
}
}
Best way is to apply media queries to the images you want hidden on the mobile devices. One way to do that would be
#media screen and (max-width:your-value-here){
img{display:none}
}
In place of 'your-value-here' type a width of a screen you want to place a breakpoint for your media queries in pixels. Also i suggest using classes or ids instead of 'img' tak to select the images.
You need to use media queries, the code in media queries is applied depending on some charactristics of the device :
#media mediatype and (expressions) {
CSS-Code;
}
In media type you can add screen to determine the size of the screen
In expression you precise the min-width: for which this applies
And in CSS-code you fill in the code that applies only if the screen is smaller than a number of pixels here display: none for the image.
You can do this using media queries.
First, add a class/id to the div that contains the images or to the image itself.
#media only screen and (max-width:767px){
.choseImg img{
display:none;
}
}
So I'm having trouble getting my div to resize based on if it's a mobile (specifically smartphone) device. Now the mobile device I'm using is the iPhone7plus. So I'm not sure if the dimensions I have are for this device.
my original css (for desktop) is this:
div#allContent div#mainContent div#contentText {
width:50%;
/*other styles*/
}
So the text on the screen is on one half of the page and the signup form will be on the other half. Now when I view in my iPhone the drop down items from the form are too big and I can't see the text inside the drop down boxes. So I'm trying to get the width of the contentText div to be 100% then also the form div to be 100%.
I added this to the bottom of my css file
I've tried this first line to:
/*#media only screen and (min-device-width:320px) and (max-device-width:480px) {
#media screen and (min-device-width:320px) and (max-device-width:480px) {
div#allContent div#mainContent div#contentText {
width:100%;
}
div#allContent div#mainContent div#signupContent {
width:100%;
}
}
Is it because I have a larger mobile device that it's not working? Should i increase the max values? I'm just learning mobile device support.
Mobile device max-width can be 767 after that i pad and notepad device width starts.
#media screen and (min-device-width:320px) and (max-device-width:767px) {
//code comes here
}
I think the media query syntax is different in your code
#media screen and (max-width: 480px){
}
I hope this media query will work for iphone portrait mode.
Maybe your problem is a syntax or you are not selecting the target correctly, if you post your full code (HTML and CSS) we could be more helpful.
Regardless, you could use min-width and max-width instead of *-device-width.
I have created example on CodePen, check it out it will help you.
I have created a responsive website using Swiper. I have used #media queries in my css to fit different screen size and orientation.
Initially, I have 1 main css, 1 landscape css and 1 vertical css. I imported two orientation css into main css. Only main css is in html file. The website works fine with all screen sizes. The css snippet regarding the media is as below:
#media screen and (orientation:landscape) and (min-width:700px) {
#media screen and (orientation:landscape) and (min-aspect-ratio:16/10) {
#media screen and (orientation:portrait)
Then I read about not using import for css so I cat all .css into one file. I also deleted the two #import lines. Then the website does not work properly. Specifically, all elements on small screens return to normal size. I checked the css structure: these elements lose their style enclosed in #media {} thus inherent from their parent css.
The fiddle with all the code is here. It's not working because it supposes to grab local image files.
The working website with separate css files is this. It's on Github so you can see the source files easily.
I am really new to css so this might be due a stupid mistake..
Use these media screen for tablet and mobile if you are not importing hopefully it will help Thank's
beside your fiddle shows this on top }//]]> i dont know why might be js issue or some text in body
#media only screen and (max-width: 1024px){}
#media only screen and (max-width: 768px){}
#media only screen and (max-width: 767px){}
I am trying to develop a website using bootstrap framework. I've successfully made a responsive carousel, which works fine. But when I change the size of browser to mobile screen the caption covers the image or covers most of the part of image. Although I'm beginner in CSS for mobile devices.Can anyone tell me how to reduce the size of caption text on mobile or tablet devices. Any help regarding this would be appreciated. I can't put the whole code here because it is quite big. So I'm posting the link to my website.
Here is the link to my site: link
You should read up on Media Queries. With Media Queries you can set specific styles for different window sizes and also for specific devices.
Let's say that you want to change the font-size of a CSS-rule when the width of the window is bigger than 320px and smaller than 400px. Then you can use a code snippet like this:
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
.yourclass{font-size: 14px;}
}
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!