I want to create a CSS Rule so the div ".ise" is hidden only when window size is lower than 980px. I cannot create an inverse function so it shows when (min-width: 980px). I created this rule but it doesn't works I would really appreciate your help.
#media(max-width:980px){
.ise{
display: none;
}
}
your code is correct and works properly.
#media works with window size. thus when you resize your browser window, its width changes.
debug the window width with this code:
<a onclick="alert($(window).width());">hi</a>
try it in jsFiddle
You can use LESS, a dynamic language for styling the document.
and You can use javascript in it.
or if you dont want to use LESS, see this link
Related
I'm having a problem moving a panel slightly of the page like that:
enter image description here
I tried width: 120%
it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4
Pls help, thank you
Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.
If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.
Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.
Check this out based on device size.
/* For devices smaller than 400px: */
body {
left-margin: 100%;
}
/* For devices 400px and larger: */
#media only screen and (min-device-width: 400px) {
body {
left-margin: 50%;
}
}
Take a look at W3's Informative Series on responsive web design.
https://www.w3schools.com/css/css_rwd_intro.asp
I am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
I have to superimpose a form over an image, and it's not a problem, since with some CSS instruction it is simple. The problem is that I must do it responsively, in a way that with every monitor and resolution the positioning doesn't change and adapt itself.
This is an example: http://www.gruppofas.eu/siti-web/
Positioning the form in the green-bordered box it isn't a problem, but doing it in a way that, when viewing it in different resolutions or devices, it remains inside it, how can it be done?
Thanks
You should use media queries in your CSS file.
Go to your CSS and add this:
#media (max-width: 600px) { - here you add the px**** and it will resize
.YourImage/BoxClassGoesHere* {
display: none;
}
}
You can also check in google for media queries.
I hope that helped you.
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.
Is it possible using only CSS or I have to use some javascript as well?
What I need is something like [this][1]
Any help or advice will be highly appriciated
Thanks
What you want to do is to Responsive Design
For example you can make your css target a particular devise as:
//General css
/*MEDIA BETWEEN 300 - 1000PX */
#media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
#media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
#media all and (min-width:300px) and (max-width:620px)
{
}
Some of the pages that can help are:
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
NOTE: use em and % instead of px and pt
Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!
What you are talking about is called "Responsive Design".
A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.
There is a great article about it here:
http://www.alistapart.com/articles/responsive-web-design/