Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Good morning all,
I have made a facebook application that runs a simple php page in the background. The link is apps.facebook.com/wai-yuen-tong (Dont bother about the language, even i dont know it).
The scenario is-
1) The complete app is made using ajax. Theres only one page and the whole thing works using ajax.
2) The height of the page depends on the height of the background irrespective of the elements on the page. Height is calculated based on width of the background images to keep the aspect ratio.Elements needs to be placed exactly on the background whereever needed.
I made this app and it works fine for desktop version. Because we know that the iframe of facebook app is of 810px. So elements can be given absolute position based on where they are needed on the page.
But the problem comes when I use this app on mobile. On mobile there is no fixed width. The page need to be responsive according to the width of the device.(Height is automatically settled to keep the background image in aspect ratio.)
So to make the page responsive(Elements adjusting according to height and width) I used percentage system. Thats where all the problems started. I got to know that % is only calculated based on width irrecpective of height. For eg margin-top:10% and margin-left:20% both will be calculated on the basis of width of the page.
1) If I make the page on chrome on one aspect ratio screen. When on mobile. The aspect ratio changes. The background readjusts but the elements go out of place because % is still calculated based on width.
2) The app renders differently on safari, chrome,etc.
3) Switching the phone from portrait to landscape also ruins the formatting.
Thought solutions.
1) I thought of using script to change the position of elements. But that would need me to write the whole css inside script which is insensible.
2) I thought of using media sets but how many should I use as there would be so many different resolutions being used out there.
3) I thought to calculate % based on height in my script and assign it to elements but even the background in the app is changing on diferent pages.
4) Would using different style sheets help???
Please help me in choosing what approach should I use to solve this problem. This thing is really screwing me.
Just a thought, but why dont you uses CSS Media tags to target different screen sizes and update your CSS accordingly.
Using media tags you will be able to target screen orientation and mobile phones.
Heres a previous Stack AQ that i though relevant.
CSS media queries for screen sizes
here's some code
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Related
I am making a video player using the HTML5 video element, I have a play button that will start the video. However my problem is how I can get the play button to sit in the centre of the video. Using position or margins to push the button into the centre of the video will not work, as when you resize the window and therefore the player, the play button will move out of place.
I've tried using positioning - left/top etc, and I've used to margins with the same concept, however these do not work with a responsive video player, I'm lost with how to deal with this and was wondering if anyone had suggestions.
For centering any thing (img, icon, text etc)
.parent_item{
position: relative;
}
.center_item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.parent_item is your video wrapper class while .center_item is you play icon or button, Also it's responsive.
You need to use media queries of CSS for adding padding and margins for a different size for different devices.
Following media queries will help you to code. Put your padding and margin CSS code inside it for varies device viewports.
<style>
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
#media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>
I am creating a webpage and when I resize the window it kind of starts to mess up. Text changes its position and so on. How is it possible to keep it beautiful even after resizing the window? Maybe there are some video courses? Thanks in advance!!
lots of video courses are available. You can search by "Responsive layouts" keyword. But you can get rid of easily. All you need is standard media queries. Put this media queries in the end of your .css file and start styling according to your screen size. (e.g for mobile size use (max-width : 767px) etc..)
#media only screen and (max-width : 1200px) {
}
#media only screen and (max-width : 979px) {
}
#media only screen and (max-width : 767px) {
}
#media only screen and (max-width : 480px) {
}
#media only screen and (max-width : 320px) {
}
You are looking for css media-queries it is a broad subject. So I can not point to exact destination to go. But the are tons of material on youtube pertaining those subject. You could also tried https://scrimba.com/ for interactive tutorial.
CSS media queries can help. They let you make rules in CSS about how you want different elements on your webpage to display when the screen size changes, or when it is displayed on a smaller or larger screen to begin with. Here is a good introduction: w3schools: CSS Media Queries.
Basically, you set "breakpoints" and the styles you want for those breakpoints:
#media screen and (min-width: 500px) {
body {
margin: 10px;
}
}
More examples: w3schools: CSS Media Queries - Examples
in my project i am working on two column layout like col-lg-8 col-lg-4 , or col-lg-6 col-lg-6 but i want when it will open in mobile view it will convert in the slider what is best solution make a separate section for mobile view or any best way for doing this
Please help me
You need to look into using media queries. These will allow you to cater your design to the width and height of your screen.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Media Queries
I have develop a complex responsive webpage layout using Bootstrap 3. The layout nicely shows the arrangement & display as expected on different screen size.
However, is it possible that I can disable the responsive for certain case use so that I set the specific layout display such as xs, then it will shows xs layout no matter what screen it is?
I am thinking could it be done by using JavaScript lying #media queries? Or, it could be easier done by using other method?
in a way a interesting question.
Have a look at this Fiddle and resize the window slowly so you can see what is happening with all the Bootstrap col-XX-XX at the same time.
I have set up groups of cols to show you what would happen if you just used the XS class... as is for what you want to do.
When resizing the window watch how the other classes vary compared to the violet ones which are the XS cols.
You can also if needed roll your own here and set your own breakpoints.
Full size Fiddle here.
It's totally dependent the way you used media query and your need
Use below as per your need
#media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width:768px){
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I have been trying to understand why when I scale FF, IE, CHROME neither of them catches my website media queries which is suppose to be responsive. Although when I load it in my iPhone it is just as I designed it to be.
My css is pretty much this way..
CSS
.css goes up here for all devices such as body, header, content, etc
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px)
{
.here goes the css for all devices between 320px and a max of 1024px;
using percentages
}
As I mentioned above, If I load it in my phone (safari) the mobile version loads correctly, on iPhone and Android I have tested but if I scale my browser it doesn't change anything, it is the normal css above the media queries.
This is also in my header..
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Because the comment in css should look like:
/* this */
You code says:
.css goes up here for all devices such as body, header, content, etc
Which looks for a class of css, and tries to do find rules for it.
Next, you use
min-device-width
Which means the width of the device, and not the width of the view port, is being checked against. You probably want:
min-width
So what you want is likely:
/* css goes up here for all devices such as body, header, content, etc */
#media only screen and (min-width: 320px) and (max-width: 1024px)
{
/*here goes the css for all browser width between 320px and a max of 1024px;
using percentages*/
}
I believe the issue is that you are using device-width rather than just width in your media queries. Here is an example that uses max-width rather than device width, and it works without being on a small device:
http://jsfiddle.net/cAZPW/1/
I just have a div changing colors as you resize the width of the screen:
.full-size {
height: 100%;
width:100%;
background-color: red;
}
#media screen and (max-width: 500px){
.full-size {
background-color:green;
}
}