I'm VERY new to coding.
I'd like to delete the black border (screenshot attached) on the mobile site of my website. I tried this CSS code that I found online, but had no luck.
#media
(max-width: 768px) {
{
#border: 0px;
}
}
http://www.viragocreative.com/see image
Thanks!
you have added media query and it's the proper way but you didn't select a class to style, I've checked your website and in your case it will be like this:
#media (max-width: 768px) {
.row.vc_custom_1494841069452 {
border: 0 !important;
}
}
I used !important because you are using it over all your site and it's not a good practice but if you want to do what you want, just add the css above
Add the class name or add element id and remove # before border property.
#media (max-width: 768px) {
.classname {
border: 0;
}
/* or */
#elementid {
border: 0;
}
}
Related
is it possible to do something like this:
.overlay {
display: none !important;
}
#media only screen and (max-width: 768px) {
.overlay {
display: none !not-important;
}
}
so I can override it by javascript code just in mobiles.
tnx
You can override !important with your own !important, if it comes later in the css processing. However you can also use !important on a more specific element. So given the first !important is on ".overlay" if you had an id on your overlay, say "myid" then if your rule was:
#media only screen and (max-width: 768px) {
#myid {
display: none !important;
}
}
Then it would override the first, as its selector is more specific.
If you want to overwrite the display rule in 786px style, then you can write something like;
#media only screen and (max-width: 768px) {
.overlay {
display: inline (or block or anything else);
}
}
According to my knowledge, you have to write display property for all the other screen widths separately.
I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query
#media only screen
and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.
#media only screen
and (min-width: 1282px)
{
#wrapMiddleNew { display:none; }
}
I just got trough your page and you have to add more query format.. this should do the trick
/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
display:block;
}
#breakNav {
display:none;
}
/* Media Query */
#media only screen and (max-width: 1282px) {
#wrapLeft, #wrapRight {
display:none;
}
#breakNav {
display:block;
}
}
#media only screen and (max-width: 900px) {
#wrapLeft, #wrapRight, #breakNav {
display:none;
}
}
So each time your window goes lower 1282px will apear if its bigger will hide....
Do this:
#wrapMiddleNew{
display:none;
}
#media only screen and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
You don't need the second query as the first bit of css only comes into effect while the screen is less than a certain number here is a demo:
http://jsfiddle.net/Hive7/WZXM6/
CSS:
#media all and (max-width: 500px) {
.hi {
display: none;
}
}
Here is a media query tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You are targeting the wrong div your query should look like this:
#media only screen and (max-width: 1282px) {
#breakNav {
display: none;
}
}
Then remove any jquery affecting that element
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
i'm working with responsive design and in my css there are e.g. three different media queries with a list item style:
#media only screen and (min-width : 1350px) {
li.item:nth-child(n+6) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: red;
}
}
#media only screen and (min-width : 1550px) {
li.item:nth-child(n+7) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: green;
}
}
#media only screen and (min-width : 1750px) {
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: blue;
}
}
So beginning with the 6th/7th/8th li item, i'm adding a top border. The problem is:
For 1350px i got n+6
For 1550px i got n+6
For 1750px i got n+6
When i add another earlier nth-child property, this earlier one is set for every coming nth-child for this li item.
I added for testing some more other styles, like green, blue and red headline and these styles are working.
What's the problem?
with best regards
Sebastian
=> Solution
Okay got it now with reseting previos nth-child properties like this:
li.item:nth-child(n+7) {
border-top: 0;
}
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
You are only checking for minimum values, not maximums, therefore overlap occurs. (Your question was a little unclear, that is the problem no?) If my understanding of media queries is correct, you have no rules there that should cascade over and replace the existing rules, as I assume you intended.
Try the following conditions instead:
#media only screen and (min-width : 1350px) and (max-width : 1549px)
#media only screen and (min-width : 1550px) and (max-width : 1749px)
#media only screen and (min-width : 1750px)