Im looking for a very simple method for responsive images.
The site im building has huge background images, which I need to keep for desktops.
However, these are too large to work on tablets/mobiles. It seems that if I reduce the images to 50% size, they will work on all screens.
Is there any simple way to have two sets of images in two different folders, and then select the folder based on the browser being used?
Cheers
Use media queries to denote 2 sets of images (and more). For example:
#myBg {
background-image: url('bigVersion.jpg');
}
#media (max-width: 600px) {
#myBg {
background-image: url('smallerVersion.jpg');
}
}
Simple example, showing two different images when the window width is above 600px and below. You can do a lot more with it.
Read more about media queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Related
We have a website designed for mobile, and its appearance and operation are awful on desktop. I want to make a change to the CSS or javascript/jquery of the website so that it will be rendered good on the desktop. for example by something like this:
#media only screen and (max-width: 500px) {
body {
width: 500px;
background-image: * ;
}
}
One of the problems to be solved is that the vw's used to make the display responsive for different mobile sizes would be so big on the desktop that would mess everything.
please help thank in advance
Vw or viewport width is a percentage of the screen size. (So 10vw is 10% of the screen's width) Which means that vw always keeps the same size ratio regardless of what screen it is on. If you want to change a certain css element's size when screen width exceeds a certain size in px than add a new media query with a minimum width of a desktop screen. For example 1920px.
You can try search for ideas in bootstrap's classes and methodologies, like using different class modifiers for different screen sizes (col, col-md, col-xl, etc)
As Jalen said, you might want to look into inserting media query and breakpoints at sizes that you find less usable, and optimize those.
From experience, making an existing app reactive (meaning that it can run in both enviroments with a single codebase) can be daunting, but with few changes in css and templates you might be able to achieve it
I got a WWW website project where mobile version is the same as mobile app but "desktop" version is completely different. Different nav, different cards, views divided in different way..
What is the best approach to do this in PHP/Laravel and HTML/CSS/JS? I'm asking about general approach.
Thank you in advance.
K
This should be done through css using media queries by doing this you can control the cards sizes and views depending on the device size. You can find more information https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The 'trick' I use for that is using a different css stylesheet.
You can set a min and max for your css styles, f.e.:
#media (max-width: 600px) {
//put css here for very small screens
}
#media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
#media (min-width: 1025px) {
//put css here for large screens
}
Note that this only works if your html stays the same over all screens and the layout is only defined by different css. But in certain situations this is a possible approach.
But differences are huge and in my opinion using only CSS is not enought. Changing size of elements and position in grid is obvious and exist in all projects. This is some kind of edge case.
For example on desktop I have user profiles in one view with 2 sections but on mobile I have two dedicated subpages.
In desktop I have normal menu in nav bar but on mobile each view have on top and bottom contextual buttons.
In desktop some things are in modal but in mobile in separated subpage or as a appearing text label (simple status).
...and so on
I have downloaded a free HTML template from web and i'm trying to edit this HTML theme. In my theme i changed background photo, it's good on my computer and my resolution (1366x768) but on mobile and other resolutions it's not working well. Background image is crushing.
please visit that website with your computer and your mobile phone for understanding clearly. Theme link
and please help me to edit mobile version of this website. I couldn't find anything. Here's the list of my javascript files in theme folder. image of files
What you can use is a media query the syntax of which looks like so:
#media <What to respond to> {
//then place the elements, class and id here
}
The media query can take in width by doing #media (max-width:<insert width here>) or #media(min-width:<insert width here>)
Multiple media queries can be used together like so #media (max-width:100px) and (min-width:50px).
Another class of media queries can be used to specify how behave depending on the type of device, they include but not limited to:
tv
screen
handheld
all
They are used by typing #media <name of device>
An Example with some of they things i have mentioned being used
#media screen and (max-width: 100px) and (min-width: 50px) {
//If the device is a screen, is wider/equal to 50px but smaller
//than or equal to 100 then it will do this
img {
width: 75px;
height: 30px;} }
#media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}
My suggestion is to read up on it take a look here
There are many ways to solve your problem. One way is change the background using media queries. This is done by editing your css file. If you have multiple css files, you will need to know which one is setting your background image and place the media queries in there.
I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I would like to know, if I can maintain a single CSS file for my mobile web app. The web app is targeted for different resolution of android devices. So i would like to know can i use same set of images and scale it down using any CSS styles, rather than keeping multiple images for each resolutions ? The webapp is built using html5, css3 and javascript.
I know we can use css media queries, but through that i will need to load different images based on the device width. I am trying to use same images for all resolution of devices. If i keep a high resolution image overall in the code.
Is this possible ? please let me know.
Thanks in advance. Appreciate any kind of help.
You can do something like this:
#media screen and (max-width: 480px){
.element { background-image: url(../images/bg1.img); }
}
#media screen and (min-width: 800px){
.element { background-image: url(../images/bg2.img); }
}
but you can also set it to maybe 100% (If it should fit the screen on any size)