This question already has answers here:
Responsive css styles on mobile devices ONLY
(4 answers)
Closed 5 years ago.
I just finished creating my website but now I have found a failure. My problem is that my website looks totally nice on the PC. But if I go and look at it from my mobile phone, the spaces between certain images etc. are a great deal too much...
So my question is, how can I create some CSS codes who are only affecting the mobile devices and maybe tablets?
Is there a way?
CSS has feature called media queries.
From the MDN link:
Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
For example:
div {
background: black;
}
#media (max-width: 1000px) {
div {
background: yellow;
}
}
The background color of this div will be yellow on screen under 1000px width like in the example provided.
You can use media-queries for different screen resolutions.
Example:
#image img {
width:375px;
}
#media screen and (min-width: 1366px) {
#image img {width:375px;}
}
Read and understand about Media Queries
You will be able to adjust the css of certain media sizes of your website.
Related
How can i show a different logo when my website is viewed on a mobile device?
I know nothing about html for after some research i found that this can be done adding some ccs to my style.ccs.
Im working on Wordpress but i tryed different ways and no one worked for me. If anyone can help me with a code for my web im going to be very grateful :)
My web is camporecoleta.com.ar and i want to show the next logo when the page is loaded on a mobile device: http://camporecoleta.com.ar/wp-content/uploads/2017/12/Logo-1-1.png
I hope anyone can help me, sorry if i had any mistake, my main language is not english
Well there is probably a lot of ways to do it but one easy way would be plain old css with #media that will apply diffrent styling depending on the viewport.
Basicaly you could use a css background image on an element and when the screen gets to a specified size there is another css class with a diffrent image that is apply.
You could also just ajust the size of that same logo.
CSS #media rule
You can solve your issue with media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
or
Try function wp_is_moible()
if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
}
https://codex.wordpress.org/Function_Reference/wp_is_mobile
Try using CSS media queries like this:
#media only screen and (max-device-width : 640px)
{
/* style here apply for screen width up to 640px */
#logo
{
background-image: url('pathToImages/myMobileLogo.jpg');
}
}
#media only screen and (min-device-width : 640px)
{
/* style here apply for screen width above 640px*/
#logo
{
background-image: url('pathToImages/myBiggerImage.jpg');
}
}
I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 7 years ago.
So, I need a way to so that a CSS class is only used by desktops (Normal Screen).
Eg:
.class {
position: fixed;
}
Is only used on desktops.
Although it's not desktop specific, you can limit it to the screen based on the screen size with a media rule around it, like so:
#media screen and (min-width: 640px) {
.class {
position: fixed;
}
}
This would limit your rule to only be applied if the monitor was at least 640 pixels wide, larger than a smartphone (today, anyway).
This question already has answers here:
How to remove responsive features in Twitter Bootstrap 3?
(8 answers)
Closed 8 years ago.
I have made a website with bootstrap 3, so by default it's responsive. However, I don't want it to be responsive (it's long story).
Basically I just want it so that on tablets and phones you have to zoom in and out to read it. It's just a basic brochure website which is why responsiveness isn't necessary.
I've tried taking out the meta view-port tags and googled how to do it endless times but I can't make it to act/look like a normal website, if that makes sense. What do I need to do to make Bootstrap 3 unresponsive?
.Container{width: 960px;} // add your designed width
#media (min-width: 768px){
.Container{width: 960px;}// add your designed width
}
#media (min-width: 992px){
.Container{width: 960px;}// add your designed width
}
#media (min-width: 1200px){
.Container{width: 960px;}// add your designed width
}
Write it your external CSS file. Remember First add bootstrap.css then add your external.css.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am always coming back to the same question when developing a website for all devices.
Does it make more sense to make everything full responsive by setting everthing in percentage values or to query a few max-width and min-width with css3 so you can have your normal website with 960px and size it down for the different devices..
For the css3 mediaqueries i would use something like this:
/* CSS */
/* Basic responsive */
#media screen and (max-width: 960px) {
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* iPads (portrait) and similar tablets */
#media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* Smartphones */
#media only screen and (max-device-width : 480px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
thank you
You should do a bit of both. If you can write some CSS that works across all devices then that's great. For example if your header goes 100% of the width for every device there's no need to adjust it with media queries. In reality you'll find certain parts don't work and will need adjustment. This is where media queries come in.
You shouldn't treat each media query as a new stylesheet, instead it should just alter or build on the styles already defined in order to make the layout work.
Typically sites adopt a mobile-first approach. This means you start with the mobile layout and increase the complexity as the viewport width increases. The benefit of this is that older browsers will get the simplistic mobile version of the site (which at least should work, even if it isn't pretty on a desktop).
You can read more about responsive layouts here:
Build a Responsive, Mobile-Friendly Website From Scratch
Common Techniques in Responsive Web Design
If you fall in such confusions, i would suggest to opt for bootstrap
...otherwise, using media-queries is a better option as it gives you wider flexibility and freedom to set values both in pixels as well as percentages.
A combination of both, or media queries.
You have to remember that if you don't use Media Queries, on every device (smartphone, desktop, laptop, etc.) you are loading all data for the website.
And if you load all data it loads also, for ex. images and that can cost a lot of Kb sent to the client browser.
With Media Queries you can set display: none; to images on the page and less Kb will be send to the client.
So it is important to understand that form mobile devices you should send as small portion of data as possible.