Page visibility when resizing - javascript

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

Related

How to put a menu bar in my media query of max-width=1000px in CSS

I'm having problems putting a menu tag on my website. I have watched so many videos on it but all to no avail. The media query is this:
media only screen and (max-width: 1000px) {
/*CSS code here.*/
}
You are missing one key feature, the '#' sign before the word media. The correct media query would be:
#media only screen and (max-width: 1000px) { /*CSS code here.*/}

Non responsive Bootstrap via lie #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 */
}

How can I make an ad visible only to mobile users?

I want to use some mobile ads but my website has responsive design so I don't use the m. subdomain.
How can I make an ad visible only to mobile users? What about only to desktop or tablet?
I'm using wordpress as a CMS.
Thanks,
It's quite easy using CSS3 Media Queries.
In your CSS:
#media (max-width: 480px) {
#ad-id {
display: block;
}
}
For bigger devices, hide it:
#media (min-width: 480px) {
#ad-id {
display: none;
}
}
If you are really concerned about data being downloaded, then you must detect the browser size on page load, if it's less than particular width then fire an ajax call and fetch the ad data and display it inside the placeholder container.
$(function() {
if($(window).width() < 480) {
$("#ad-id").load("adcontent.html");
// else use $.ajax for this purpose
}
});
Please use css media queries. you can show and hide specific div for mobile devices.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { }
One way is to use media queries. Make the ads as display:none by default and add display:block only in media queries for mobile.
.ads{
display:none;
}
#media (max-width:480px){
.ads{
display:block;
}
}
Despite the seeming simplicity is quite a tricky question.
Try not to waste time (which has already been spent by other developers) and use one of the existing solutions like isMobile or mobile-detect.js.
This libraries allows you to detect:
is mobile, tablet or desktop;
specific browser version.
operating system;
...
You can do it using CSS3 media queries,
//medium+ screen sizes
#media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
for large resolution devices you can use following media queries,
//large resolutions only
#media (min-width: 1200px) {
...
}
Also if you are using any front-end framework like bootstrap. then you can find some written classes like
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
using these classes you can play around your content to show and hide on specific devices.
http://getbootstrap.com/2.3.2/scaffolding.html

Why are #media queries ignored when browser is scaled?

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;
}
}

image height based on mobile orientation

I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}

Categories

Resources