Hi for some reason my responsive CSS is not working, I'm not sure what to change or what to do, but whenever I load my site up on my iPhone and zoom all the way out the site only uses up approx 3/4 of the page, I have no idea why, here's the code in my CSS.
#media (max-width:767px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
I've the max width to 767 as that's the width of a iPhone to test it out, but no matter what I seem to change nothing happens.
Related
I have some social media links in the footer here that are styled to be in circles: https://milfordpa.us
Everything looks good on Chrome, but on Safari, the last one appears to get "cut off" and I can't seem to figure out why.
Here is my current SCSS:
.social-links {
display: block;
float: right!important;
a {
border-radius: 50%;
padding: 10px 11px;
font-size: 20px;
background: $color3;
color: $color2;
margin-left: 5px;
&:hover {
background: $color4;
color: $color2!important;
}
}
i {
width: 21px!important;
height: 20px!important;
text-align: center;
}
}
Thank you in advance for your help!
In one of your parent elements for .social-link you're changing the width to something that safari seems to struggle with.
A quick fix is to reapply the width on .social-link
.social-link {
text-align: right;
min-width: -webkit-fill-available;
}
I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this from the css as it needs to stay original. I also don't want to copy the whole bunch of classes and write "none" or "unset" behind every single attribute. Is there any solution for this. Thanks a lot.
/*original.css*/
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
}
/*custom.css*/
/*here should be nothing like it wouldn´t even exist in the original*/
You can write as many classes in the media query within the parenthesis.
Here is an example for this
Just define the class above and change as per your requirement as per screen size.
.custom_class1 {
height : 1px;
}
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
.custom_class1 {
height:70px;
}
.custom_class2 {
height:70px;
}
}
I've built my own WordPress theme, and everything went smoothly, until I put it online and looked at it on my phone. Apperently only a part of my css doesn't show. It is specifically the css I use to modify the look of the forms from the plugin "Ninja Forms".
I've added css classes to the form elements through the plugin and used them to modify the look of the forms in the css.
It works fine on desktop (Windows computer, Chrome and Edge browsers, but not on my phone (iPhone, Safari browser). I thought it might be Safari that was the problem, but the css works on my iPad in Safari...
Any ideas to what could be the problem?
Below is the used CSS for the forms.
#newsletter-form, #contact-form {
width: 30%;
text-align: center;
margin: 0 auto;
}
#newsletter-form {
padding: 100px 0 50px 0;
}
#contact-form {
padding: 50px 0 100px 0;
}
#contact-form h3, #newsletter-form h3 {
font-size: 35px;
padding: 0 0 10px 0;
}
.form-contact-name-wrap, .form-newsletter-name-wrap {
padding: 20px 0 0 0;
}
.form-contact-name, .form-newsletter-name {
border: 2px solid rgba(215,134,0,0.5);
}
.field-wrap div input, .field-wrap textarea {
height: 35px;
padding: 5px;
}
.form-contact-email, .form-newsletter-email {
border: 2px solid rgba(215,134,0,0.5);
}
.form-contact-message, .form-newsletter-message {
border: 2px solid rgba(215,134,0,0.5);
}
.form-contact-submit-wrap, .form-newsletter-submit-wrap {
background: #D78600;
color: white;
border: 2px solid #9A6000;
height: 40px;
width: 120px;
border-radius: 7px;
margin: 0 auto;
}
.form-contact-submit-wrap:hover, .form-newsletter-submit-wrap:hover {
background-color: #9A6000;
}
I found the answer to my own question and forgot to post it, but better late than never, right? xD
The issue was the cashe on my iPhone. Everything worked like it should after I deleted all of my browser data on my iPhone.
So much data deleted just to get a test website working properly on my own phone...
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.
I have a bizarre problem, IE 7 and 8 are not loading about 80% of one of my stylesheets, they get to a point, and then don't load any further. The IE dev tools recognise the unloaded properties, but they aren't applied in browser. The following stylesheets all load correctly, and no other browser has any problem with them. Additionally, the HTML prototype site which is about 90% the same as the near-production version has no problem.
The site is being built locally on Wordpress, but I've uploaded the source for the home page here, should that help (the stylesheet that doesn't load correctly is '760.css'). Additionally, the (correctly working) prototype can be viewed here, but some changes have been made between that version and the conversion to Wordpress.
The offending stylesheet (seems to stop loading after the ul#menu-site-nav properties have been applied):
/*
Created by Mikey Clarke | #mikey_clarke
*/
#nav-bar {
font-size: 0.95em;
padding: 0px 0px;
}
#nav-bar ul {
text-align: left;
}
ul#menu-site-nav {
width: 95%;
margin: 0 auto;
}
#nav-bar li.primary-nav {
width: 14.584%;
padding: 20px 1.042%;
float: left;
text-transform: uppercase;
}
#nav-bar li.primary-nav:first-child {
display: block;
padding-left: 1.042%;
}
#nav-bar li.primary-nav:nth-child(2) {
padding-left: 1.042%; /* restore outer padding */
}
#nav-bar li.primary-nav:last-child {
padding-right: 1.042%; /* restore outer padding */
}
#nav-bar li ul {
display: block;
width: 100%;
text-transform: capitalize;
}
#nav-bar li ul li {
float: none;
padding: 0px 0px;
display: list-item;
}
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield.png) no-repeat;
background-size: 25px;
background-position: 10px 23px;
}
#nav-bar .shield-logo span {
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
display: block;
padding-bottom: 12px;
}
#masthead {
font-size: 2.25em;
padding: 35px 0;
}
#masthead a {
display: block;
padding: 0 160px;
}
#content {
width: 82.279%;
padding-right: 1.042%;
float: left;
}
.sidebar {
width: 14.586%;
float: left;
text-align: right;
padding: 0px 1.042% 20px 1.042%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
#section-nav>ul>li>span {
padding: 4px 4%;
border: 1px solid transparent;
margin-bottom: 4px;
}
#section-nav li ul li {
padding: 4px 4%;
margin: 4px 0px;
border: 1px solid transparent;
}
#section-nav>ul>li.current-menu-item>span,
#section-nav>ul>li>ul>li.current-menu-item {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #f6f6f6;
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
background-color: #ececec;
background: rgba(0,0,0,0.02);
}
#breadcrumbs {
font-size: 0.9em;
}
/* Restore content only useful for users browsing from desktops */
.mobile-superfluous {
display: block;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield#2.png) no-repeat;
background-size: 25px;
}
}
After rewriting the entire stylesheet by hand and testing after every line, it seems that the problem is with the media query at the end. I've removed every part of the media query individually and am completely unable to identify what part of it IE is choking on. I also copied and pasted the media query to a different stylesheet and that stylesheet loads fine in IE 7 & 8. So very strange.
Since it does work without the media query, I've moved it to another stylesheet where it works fine.
Your problem seems to be in the fact that some CSS pseudo selectors you are using aren't supported by these browsers, namely :nth-child and :last-child.
And while it should work I they might be having trouble with the immediate child selector used without spaces (this is just a guess but not far fetched) i.e. section-nav>ul>li should probably be #section-nav > ul > li
Do mind that IE7 and I think 8 as well don't support rgba either.
Any succeeding parse errors or missing styles could be attributed to this, maybe...
For more information about the exact spec that IE7+ should support please read this excellent article about CSS2.1 selectors