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.
Related
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've a navigationbar like these: http://www.gymnasium-templin.de/gym/index.php and try to develop a mobile version style via css mobile queries. When I resize the navigation bar, f.e. to 320 px (instead ov 900px), I've got a "overflow". I tried to use the overflow: in css to insert a automatic break. But there is no option to realize it. overflow: scroll; works, but I want to get a "line-break" and two "lines" or more with the navigation buttons. Have everyone a idea how to realize that?
Best regards from germany.
You could use media queries, what this one does, is that as soon the screen is smaller than 330px, it will apply these css rules in between the brackets.
#media only screen and (max-width:330px) {
#element {
change properties..
}
}
I'm not sure if I understood your question correctly, let me know.
I'm pretty new to Bootstrap, and I have some issues with my mobile view:
Link: http://bit.ly/1yYmgvI
Now obviously the mobile view is a mess. I'll go through a couple issues I'm having:
The navigation drop down works, but the background is non-existent when clicked.
How do I move the "we design IOS apps" up? I tried the "pull" class but that actually pulled it horizontally, not upwards.
How do I adjust the height of different rows for mobile view? As you can tell, the services height (the white background) needs to be extended much longer, but it's quite short in mobile.
I'm pretty new to this so if you guys could help me out that'd be so appreciated. Thank you in advance!
You simply need to give the background of the navigation dropdown a background-color, like this:
.navHeaderCollapse {
background-color: #222;
}
If you want to minimize the padding, so that you can move the "we design IOS apps" up, you can use a media query at your desired change browser width, which changes the padding. Use it like this:
#media (max-width: 765px) {
.xlg-buffer {
padding-top: 35px;
}
}
The same works for adjusting the heights of the different rows in "mobile view". Just use an according media-query to change the heights. For example like this:
#media (max-width: 765px) {
.row-services {
height: auto;
}
}
NOTE:
All given values are just examples, you need to adapt them to your needs. Use the browser inspector to find out which selectors you need to target and which properties you need to change.
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
I've been working with a page which has two layouts dependent upon the width of the device being used to view the page:
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
}
This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.
My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements. Thus, does a method similar to the CSS media query exist for HTML? Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?
EDIT: A better approach, at least as far as images and graphics are concerned, is likely to use CSS to define the image rather than the HTML. Thus, instead of doing:
<div id="img"><img src="URL"></div>
...and trying to hide the div, you would instead take this approach:
<div id="img"></div>
and...
div#img {
background: none;
}
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
div#img {
background: url(URL);
height: 400px;
width: 600px;
}
}
Thus, the mobile version doesn't load the images and we're still only using CSS.
Or alternatively, is is there a way to define two different HTML
layouts based on the width of the device the page is displayed on?
Thats the route to take imho. HTML doesn't have a similar mechanism to define different rulesets for viewports.
I think there are some js options. Does this conversation help?
What is the best way to detect a mobile device in jQuery?