I've made a mediaquery and, strangely, some of the new css properties work and other don't...
working : .ctas and .footer-content
When I use the chrome inspector, I doesn't even detects the mediaquery for the classes not working...
You can see the page I'm working on here : http://sopureinthecity.fr/test/
#media screen and (max-width:570px) {
.ctas {
width: 270px;
}
.footer-content {
padding-top: 20px;
}
.img-reponsive {
margin-top: 40px;
}
.main-title {
top: 30%;
width: 100%;
font-size: 18px;
}
.modal-btn {
top: 48%;
}
}
What did I do wrong ?
Thanks in advance !
EDIT, so everything works in the browser, but my .large-header is all bugged when I visit the website on my phone !
The responsive of the .large-header only works on the desktop (with a phone screen size)
You have typos in your css selectors when compared to the site you have linked:
.img-reponsive vs .img-responsive
.modal-btn vs .modalbtn
Nothing is wrong with the media query. The issue is a typo:
.modal-btn {
should be
.modalbtn {
As the CSS class used in your page is modalbtn.
Related
I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/
Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.
We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.
.vc_col-sm-4 {
width: 33.33333333%;
}
.vc_col-sm-8 {
width: 66.66666667%;
}
The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?
Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.
#media (min-width: 768px) {
.tribe-events-single > .tribe_events .vc_col-sm-4 {
width: 33.33333333%;
}
.tribe-events-single > .tribe_events .vc_col-sm-8 {
width: 66.66666667%;
}
}
The CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
has a greater DOM precision and has priority. You can use !important as you said:
.vc_col-sm-4 {
width: 33.33333333% !important;
}
.vc_col-sm-8 {
width: 66.66666666% !important;
}
or add Additional CSS from the theme preview mode and target the id element #tribe-events-content
div#tribe-events-content div.vc_col-sm-4 {
width: 33.33333333%%;
}
div#tribe-events-content div.vc_col-sm-8 {
width: 66.66666666%;
}
.contact-me h2 h3 {
font-size: 40px;
}
.contact-message{
width: 80%;
}
**This is my code inside media query and Its width is not working can anyone help, please
I selected the same name of class but it didn't work
This is the image from developer tools I incepted my site and found that in my media query .contact-message width is been overridden by my .contact-message outside media query**
Your css is overlapping so use !important tag. So new code will be:
.contact-message{
width: 80%!important;
}
I have a link on this page which isn't working in desktop view but works on mobile. Is there some kind of responsive issue which would stop it working?
I applied css:
a:hover[href="https://
adsler.co.uk"] {color:red
!important;}
a:active[href="https://
adsler.co.uk"] {color:red}
The html is:
<div class="designn"><a
href="https://adsler.co.uk">
design</a></div>
The class "e" have z-index of 3 , which is stopping the link from clicking it. To fix this give z-index:4 to class "designn"
.designn {
color: black;
font-size: 16px;
position: relative;
bottom: 350px;
left: 38px;
font-weight: bolder;
z-index: 4; /* added newly */
}
From what I can see, the red e is above the design link due to z-index being 3 when device width is 768px or more. A quick solution would be adding a z-index value higher than 3 in designn.
u covered it using z-index:3 on e-letter
#media (min-width: 768px) .e { z-index: 3; }
u can use z-index: -1 for example and u will have access to
I am new in Polymer,
I have added paper-toggle-button in my project.I found css classes on official website to change color and transition animation. However I want to reduce it in size especially by some pixels.
I have search through web. But did not successes.
Please help
you can change the size by applying mixins, add the following code to your css styles
paper-toggle-button {
--paper-toggle-button-unchecked-button: {
width: 30px;
height: 30px;
}
--paper-toggle-button-unchecked-bar: {
width: 30px;
height: 30px;
}
}
Ok, so I'm using Bootstrap 3 for one of my websites.
Everything works great, but there's something wrong with the #media query to define some css for smaller devices.
So I've included all the necessary files of bootstrap (first the bootstrap css & then my own, the js,...)
In my css I have for example:
#media (max-width: 768px) {
.md-only {
display:none;
}
.item-left {
padding:0px;
}
}
.item-left {
padding:10px;
}
So what now happens is that when I add class="md-only" in my html the div (for example) doesn't show up on devices < 768px. However, the div with class="item-left" still uses the padding:10px and not the padding:0px as defined in the #media query. So it takes one css class, but not the rest.
I don't get what I'm doing wrong...
The problem is the order of your rules.
Try placing the .item-left before the #media.
.item-left{padding:10px;}
#media screen and (max-width: 768px){
.md-only{display:none;}
.item-left{padding:0px;}
}
<div class="md-only"></div>
<div class="item-left">qweqwe</div>
Make sure you are not overriding your styles. As you can see in your example, you've added the class .item-left a second time after defining it in the media query earlier thus making it obsolete.
.item-left {
padding: 10px;
}
#media (max-width: 768px) {
.md-only {
display: none;
}
.item-left {
padding: 0px;
}
}