I've just finished my wordpress website for the cabaret of my friend. I did a bit of Javascript to customize the background image and make every page different from one another.
Here's what it looks like on my computer.
Example of my website on Firefox - Windows 7
My problem is, when it comes to my iPhone, the result is really not the same...
Example on my iPhone using Safari for iOS9
So as you can see, the aspect ratio is really ugly on mobile device.
Here's my code I use on this page to customize my background:
<script>
document.body.style.backgroundImage = "url('http://cabarettapisrouge.xyz/wp-content/uploads/2015/11/12235379_10207180605785211_985692315_o-e1447975745789.jpg')";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize= "100% 100%";
</script>
So, has you can see, I use proportions 100% on both width and height to adjust my image, but it's not pretty good on mobile since the screen is different. So I know that.
Is there a way I could use external javascript and say to it 'If on mobile device, then show it that way' ? I'm not really good at Javascript for that part...
Even if it's not an external file, maybe I could just pimp my code to make it work?
Anyways, thanks for your help, I'm pretty sure you can all help me! Thanks!
I think you could try.
document.body.style.backgroundSize= "cover";
or
document.body.style.backgroundSize= "contain";
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
How about using #media in the css and load one or another image based on each device or view? (Note that '480px' is for the example, and also you can add queries to handle landscape or portrait views, or more resolutions).
#media (max-width: 480px) and (orientation: landscape) {
background-image: url('url to smaller image here...')";
}
Or change the background style depending on the device as:
#media (max-width: 480px) and (orientation: landscape) {
background-size: 100% auto;
}
Or try CSS width: 100%; height: auto; on the background image.
Hope that helps!
Related
I am pretty new to html, js, and css. I was wondering if just. like in IOS development where auto layout is needed for different screen sizes and/or orientations if this is the case for developing a website. I've looked around and seen things like margins and auto, but I'm not sure. Is there any specific links or videos one could suggest to understand this concept so that no matter how the screen size is the contents on board will adjust. Thank you.
use media queries like this :
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
.header { width: 90%; }
}
I have a little question for all of you !
I will try to apply mobile stylesheet only if the user is on a mobile.
If the user is on desktop only the desktop's stylesheet will be apply even after resizing the window.
Here is the result I'm looking :
• enter link description here
When you resize your windows the mobile's stylesheet is not apply because you are on a desktop version
easy or not ? Help me please
Thank's a lot
you are gonna need some javascript to detect the browser, even then it's still a difficult task to accomplish 100% of the time since there's always new browsers out there, one of the most up to date librearies is bowser. https://github.com/ded/bowser
You ca use css media queries
For example
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
For example the above style will be applied only when the max-width is less than or equal to 500
I've never really been good with front end designing here and I am stuck with something here. What I'm trying to achieve is make the header of website fixed only on mobile
Say
<div class='row' id='header' > </div>
I can use bootstrap and Foundation since I am familiar with the basics of it but I can't get my head around doing what I want. I want the header div to be fixed only for mobile devices so that when you're visiting from large screens/computer it's not fixed and goes with the flow with scrolling but only with mobile devices it remains fixed at top. Now I can simply change the css property with Jquery but I dont know how to find out and check for the device if it's big or small screen something like
if(deviceScreen==big){//keep it relative/absoolute} else //make it fixed
If it can be done with css only I would more than love to do it.
Another problem that I'm facing here is with the fixed elements(specifically a sidebar that only appears for small devices /main nav becomes sidebar) I want it to be fixed at the left but be scrollable in its own since some options are not visible because they dont fit in screen. I really need help here, the site wasn't developed by me. I am hired to make some backend changes and require to fix some front end bugs too that are mentioned here
Use CSS Media Queries to determine the screen size.
If lets say the screen is no wider than 600 px:
#media (max-width: 600px) {
#header {
position:fixed;
top:0;
}
}
This css rule for header will only be applied when the screen is no wider than 600. And then set it fixed to top.
You can add multiple meda queries to a single dom element, adjusting it to your needs when the user changes browser width.
More about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
you can simply do this by using css(Media Queries)
here is the demo:
http://jsfiddle.net/3cndjsx1/
#media (max-width: 600px) {
header{
position:fixed;
z-index:2;
}
footer {
position:fixed;
z-index:2;
}
}
Header (you can change selectors according to your code) and footer(you can change selectors according to your code) will be fixed for screen size less the 600px(you may also change the screen size in css Media Queries)
In case a media query will be good enough to approximate the target's device, I suggest you use orientation, like this...
#media (orientation:portrait) {
#header {
position:fixed;
top:0;}
}
...as you probably don't want the fixed menu to show up on mobiles held horizontally either.
The best approach is media queries.
You should also use 640px:
#media (max-width: 640px) {
#header {
position:fixed;
top:0;
}
}
Here a link where you can see the media queries for standard devices.
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I am going to make a website that is using responsive design. I read some information about css media query. What I wanna do is that the layout of my webpage should looks difference by using different devices (like PC, tablets or smartphones).
If I use media query to determine the device by using the width of the screen (in pixel), I always worry about if there will be a new device using a extremely high ppi screen. That device may threat as tablet or something like PC?
Another solution that is using the user agent to determine the device category by using userAgent. There's also a problem is that if the device not interpret the javascript fine then the page maybe broken.
Any great solution that can solve my worries above? Or Which solution is better?
Or I misunderstand the method of using media query?
Thank you.
CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js, but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.
Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.
Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.
Hope that helped :)
id' personally use CSS and set min-width and max-width. Most responsive designs now days use CSS. This way if there is a new device on the market it will just adjust according to it's screen size.
#media screen and (max-width:480px) { }
#media screen and (min-width:481px) { ) etc... etccc....
I prefer use media queries in CSS.
Just write the queries after the default CSS...
#media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance }
.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}
#media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}
Don't forget to insert the viewport code into the head/HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
I prefer Twtitter Bootstrap over using CSS3 media queries for such various devices.
Try jRWD, a JavaScript-only module I designed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It's available on GitHub, at https://github.com/BlackMagic/jRWD.
If you want to see jRWD in action, visit http://ieee-qld.org. Make sure you inspect the source code. Minimal JavaScript, minimal CSS stylesheet. No jQuery either.