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.
Related
pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.
however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;
<script>
if ("ontouchstart" in document.documentElement)
{
// content for touch-screen (mobile) devices
}
else
{
// everything else (desktop)
}
</script>
i want to put html in where the comments are, but I dont know how too.
Any help?
You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.
#media (max-width: 767px) {
css styles that need to be altered for mobile go here!
}
You can also use min-width in the media query to apply stiles to large screens only.
#media (min-width: 767px) {
css styles that need to be altered for destop go here!
}
And also there are ranges.
#media (min-width: 360px) and (max-width: 767px) {
css styles for screens within this range go here!
}
You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.
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 created 2 different versions of my website, one for laptop screen size and one for mobile screen size (tablet screen size, on the way). So, I was wondering if you could tell me how am I supposed to use javascript (because I have a feeling that it could be done through javascript) in order to have as a main webpage file the one that is supposed to be for laptops and in case the user opens my website through their mobile, the file that will open will be the one for mobile size screens. I hope you get my question.
Thank you very much in advance!
PS: I read something about #media but still trying to figure things out.
PS2: If you need me to post any code, let me know which part you might need and I will gladly post it.
You can use media queries to import different CSS files, depending on screen size.
This will work without javascript and would be the prefered approach in my opinion.
Your site could have the following code in a tag in the header:
/* Everything 1000px and lower */
#import url("./mobile.css") only screen and (max-width: 1000px);
This will load another stylesheet if the media query is satisfied.
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use media queries in your CSS file:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Examples and more, here
when it comes to responsive, avoid as much as you can javascript, you can do it with css media queries, you can learn more about it here:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
or you can go for the framework approach, bootstrap for example.
I think if you use bootstrap, you can easily manage you requirement quickly.
Please refer following link to get idea -
https://getbootstrap.com/docs/3.3/css/
You can use media query to handle css on you web page
// For Ipad Portrait and Landscape
#media screen and (min-width: 768px) and (max-width: 1024px) {
}
// For iPhone and smaller devices
#media screen and (max-width: 767px) {
}
also to handle javascript you need to use device width in jquery
if ($(window).width() < 767) {
alert('Less than 767');
}
else {
alert('More than 767');
}
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)