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...
Related
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.
I recently message boxes that style a message given during a php statement, and they style the message.
This is my php code.
mysql_query("UPDATE account SET is_active=1, activation_code='' WHERE activation_code='$code'");
$message_good = '<div class="register_thankyou"><p>Success! Your account has been activated. You may now log in.</p></div>';
} else {
$message_good = '<div class="register_error"><p>Account has already been activated, or you have an invalid activation code.</p></div>';
}
For some reason, it loads the style register_thankyou but not for register_error.
Both styles have this css setup.
/* ACTIVATION MESSAGES */
.register_thankyou {
background-color: #e3f6da;
border: 1px solid #3b7008;
padding: 20px;
}
.register_thankyou h3 {
font-size: 20px;
font-weight: normal;
margin: 0 0 10px;
padding: 0;
}
.register_thankyou p {
margin: 0;
padding: 0;
}
.register_error {
background-color: #f8e5e4;
border: 1px solid #c41100;
padding: 20px;
}
.register_error h3 {
font-size: 20px;
font-weight: normal;
margin: 0 0 10px;
padding: 0;
}
.register_error p {
margin: 0;
padding: 0;
}
All thats different is the background and border color
Can someone explain to me why one style is being applied and the other isnt?
Thank you:
error:
it works on here tho: http://jsfiddle.net/q8ozgfmu/
As i alarmed alien said, check in the Browser's inspector. The style might be getting overridden. Or the other reason could be that the updated style.css may not have loaded in the browser. Try clearing the cache and load the page again.
I have some CSS and it works fine on Windows, but when I view it on OSX it's not quite right.
So that is the way it should look, wonderful :
And that is how Firefox 15 on OSX displays it :
The CSS:
nav#main ul>li.current {
height: 59px;
}
nav#main ul>li.current:before {
background: url('../img/top_shadow.png') no-repeat;
content: '';
display: block;
height: 7px;
margin: -7px 0 0 0;
}
nav#main ul>li.current:after {
background: url('../img/bottom_shadow.png') no-repeat;
content: '';
display: block;
height: 7px;
margin: 8px 0 0 0;
}
nav#main ul>li.current a {
background-color: #77b9de;
color: #3e3e3e;
height: 53px;
margin: -4px 3px -8px -3px;
padding: 3px 3px 0 10px;
}
Any ideas as to why this is happening? I should point out as well, that if I move the background color to the <li> instead of the <a> it still does the same.
http://jsfiddle.net/eHhGa/
I added a quick version of it to a jsfiddle to see how the whole code looks.
I solved the issue, basically overflow:hidden; was taking effect on the container when the browsers height got below 500px and firefox was being strict about it.
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
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}