I'm working on a project for a payments company and they require the use of an external page in order to collect payment information.
The only modifications that you can make to this page are supplying a custom CSS file.
There is no meta view port tag on the page, if I add one manually to my browser it works exactly how I want it to, however there is no way to add it to their page since it is controlled by a huge payment company not willing to make any changes.
Is there any way around this? I've tried using the #media tag to my css to change zoom based on screen size since that seems to help, but it doesn't take when I add it to my CSS.
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
html{
background-color: #2c3745;
}
.PageBody{margin: auto; margin-top: 10px; border-radius: 5px; background-color: white; padding: 30px; max-width: 600px;font-family: 'Roboto', sans-serif;height: auto;min-height: auto;}
.PageContent{ width: auto;color: #000000;margin-left: auto;margin-right: auto;font-size: 14px; }
.ErrorBackground{ border: 1px solid #C79595 !important;background-color: #FAF2F2 !important; }
.ErrorMessage{ margin-bottom: 10px;border: 1px solid #DB9494; padding: 9px 10px 10px 35px; background-color: #FAF2F2;background-image: url("../images/Error.png"); background-position: 10px 10px;background-repeat: no-repeat;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px; }
.RequiredField{color: red;font-size: 13px;float: right;margin-left: 5px;}
.FieldSet{border: 0px solid #D3D3D3;padding: 0;margin-bottom: 0;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
.Legend{padding-left: 0;padding-right: 7px;color: #A3A3A3;display: none;}
.Label{ display: inline-block;padding: 3px 0px 3px 0px;width: 320px;vertical-align: top; }
.TextBox{width: 100%;height: 38px;border: 1px solid #d8d8d8;padding: 0;font-size: 14px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.DropDown{width: 300px;height: 40px;border: 1px solid #d8d8d8;padding: 3px;font-size: 14px;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;}
.LabelColon{padding-left: 3px;display: none;}
.hppFrame {width: 100%;}
.FieldSetOrder{display: none;}
/* IE8, 9 and 10 Specific Styles */
#media screen\0 {
.LegendIe{ display: inline-block;position: relative;top: -20px;left: -3px;background-color: #FFFFFF; }
}
#media screen and (max-width: 648px) {
/* .FieldSet {width: 100%;}*/
.FieldSetOrder .FormRow {margin: 0;}
.FormRightColumn input {width: 100%!important;}
.FormLeftColumn {text-align: left!important;line-height: 23px;}
.Label {width: 100%;}
.FormRightColumn {width: 97%;}
.FormRow {
width: 100%!important;
margin: 0;
}
.FormExpDateMonthField {width: 144px!important;}
.FormExpDateYearField {
width: 145px!important;
}
}
#media screen and (min-width: 649px) {
.FormRightColumn {
width: 62%;
}
.FormRow {
width: 100%;
}
.FormRightColumn input {width: 100%!important;}
}
#btnSubmit {
background-color: #5C9DEC;
color: white;
border: none;
}
#btnCancel {
border: 1px;
color: black;
background-color: white;
border: none;
}
.button {
border-radius: 3px;
margin-top: 10px;
height: 30px;
width: 90px
}
.PageHeader{}
.PageFooter{}
.FormContainer{}
.FieldSetOrder{}
.LegendOrder{}
.FieldsetCreditCard{}
.LegendCreditCard{}
.FieldsetBillingInfo{}
.LegendBillingInfo{}
.FormRow{margin: 0;width: 100%;}
.FormLeftColumn{width: auto;display: inline-block;white-space: nowrap;text-align: left;vertical-align: top;margin-right: 8px;padding-top: 4px;color: #707070;font-weight: bold;clear: both;display: table;font-size: 13px;margin-bottom: 7px;margin-top: 10px;}
.FormRightColumn{/* display: inline-block; */vertical-align: middle;}
.FormAmount{}
.FormAmountLabel{}
.FormAmountValue{}
.FormAmountField{
font-weight: bold;
}
.FormInvoice{}
.FormInvoiceLabel{}
.FormInvoiceValue{}
.FormInvoiceField{}
.FormComment1{}
.FormComment1Label{}
.FormComment1Value{}
.FormComment1Field{}
.FormComment2{}
.FormComment2Label{margin-bottom: 7px;}
.FormComment2Value{margin-bottom: 7px;}
.FormComment2Field{}
.FormName{}
.FormNameLabel{}
.FormNameLabel1{color: #BEBEBE;font-weight: normal;font-style: italic;}
.FormNameValue{}
.FormNameField{}
.FormCardNumber{}
.FormCardNumberLabel{}
.FormCardNumberValue{}
.FormCardNumberField{}
.FormExpDate{}
.FormExpDateLabel{}
.FormExpDateValue{}
.FormExpDateMonthField{width: 177px;}
.FormExpDateYearField{width: 178px;}
.FormCvv{}
.FormCvvLabel{}
.FormCvvValue{}
.FormCvvField{ width: 95px; }
.FormDescription{
display: none;
}
.FormDescriptionLabel{}
.FormDescriptionValue{}
.FormDescriptionField{}
.FormAddress1{}
.FormAddress1Label{}
.FormAddress1Value{}
.FormAddress1Field{}
.FormAddress2{}
.FormAddress2Label{}
.FormAddress2Value{}
.FormAddress2Field{}
.FormCity{}
.FormCityLabel{}
.FormCityValue{}
.FormCityField{}
.FormState{}
.FormStateLabel{}
.FormStateValue{}
.FormStateField{}
.FormStateDropDown{}
.FormZip{}
.FormZipLabel{}
.FormZipValue{}
.FormZipField{ width: 95px; }
.FormCountry{}
.FormCountryLabel{}
.FormCountryValue{}
.FormCountryField{}
.FormBankAccountType{}
.FormBankAccountTypeLabel{}
.FormBankAccountValue{}
.FormRadioButtonField{}
.FormBankAccountNumber{}
.FormBankAccountNumberLabel{}
.BankAccountNumberNumberValue{}
.FormBankAccountNumberField{}
.FormBankRoutingNumber{}
.FormBankRoutingNumberLabel{}
.BankRoutingNumberNumberValue{}
.FormBankRoutingNumberField{}
.AcceptOnlyNumbers{}
.input-validation-error { }
.field-validation-error { display: table }
.field-validation-valid { display: none }
.validation-summary-errors { display: none }
.validation-summary-valid { display: none }
.FormBankAccountValue input[type="radio" i] {
width: 20px !important;
height: 10px;
}
.FormBankAccountValue label {
width: 50%;
float: left;
margin: 5px 0;
}
You have to find the CSS elements which are preventing the page from responding in the vanilla HTML and overwrite them in your CSS file.
Related
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'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 page which I am quite happy with the layout of the design: http://dev.twoggle.com/
Then I put this into a Drupal theme and it inserted some extra div's inbetween and I am struggling to figure out how to get my original look back! : dev2.parkingmadeeasy.com.au
the ser_text_right class, when I hover over it using Firebug's page element inspect tool, seems to be overlapping with ser_image_left class - I'm not sure why this is happening.
Below is the css which is causing my problems (when combined with Drupal's output that is).
I'd like to move the entire ser_text_right class upwards, but not sure how?
Many thanks for any help,
Gvanto
/*
=======================================================================
services-prov
=======================================================================
*/
.services-pro {
background: none repeat scroll 0 0 #f3f3f3;
border: 1px solid #A2A1A1;
border-radius: 5px 5px 5px 5px;
float:left;
width:998px;
}
.services-pro .ser {
float: left;
margin: 0;
padding: 10px;
width: 47%;
}
.services-pro .ser img {
margin: 0px 10px 10px;
padding: 0;
}
.services-pro .ser .ser_image_left {
float: left;
height: 100px;
}
.services-pro .ser .ser_text_right {
padding:0;
}
.services-pro .ser .ser_text_right h4 {
padding: 3px 0 0px;
font-weight:bold;
font-size:14px;
}
.services-pro .ser .ser_text_right p {
color: #000;
margin: 0;
padding: 2px;
font-size:14px;
}
Add this to your CSS:
#block-views-home-slideshow-block { width: 400px; float:right; }
Of course you can change the width to whatever width your images are.
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
I am retrieving a bulk images through response and I need to arrange them inside a div tag and all the images are placing one below the other but I need to arrange them vertical (i.e. side by side)
So how do I do that?
And I followed this tutorial but I can arrange only text?
http://phrogz.net/CSS/vertical-align/index.html
Can anyone suggest me the right way?
Here is my code:
$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" +
file.target_name + "' target='_blank' rel='gallery'><img src='thumbs/" +
file.target_name + "' border='0'/></a> </div>");
Here is what I'm getting the result
Plupload Css:
/*
Plupload
------------------------------------------------------------------- */
.plupload_button {cursor: pointer;}
.plupload_wrapper {
font: normal 11px Verdana,sans-serif;
width: 100%;
}
.plupload .plupload_container input {width: 98%;}
.plupload .plupload_filelist_footer {border-width: 1px 0 0 0}
.plupload .plupload_filelist_header {border-width: 0 0 1px 0}
div.plupload .plupload_file {border-width: 0 0 1px 0}
div.plupload div.plupload_header {border-width: 0 0 1px 0; position: relative;}
.plupload_file .ui-icon {
cursor:pointer;
}
.plupload_header_content {
background-image: url('../img/plupload.png');
background-repeat: no-repeat;
background-position: 8px center;
min-height: 56px;
padding-left: 60px;
position:relative;
}
.plupload_header_content_bw {background-image: url('../img/plupload-bw.png');}
.plupload_header_title {
font: normal 18px sans-serif;
padding: 6px 0 3px;
}
.plupload_header_text {font: normal 12px sans-serif;}
.plupload_filelist,
.plupload_filelist_content {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.plupload_cell {padding: 8px 6px;}
.plupload_file {
border-left: none;
border-right: none;
}
.plupload .ui-sortable-helper,
.plupload .ui-sortable .plupload_file {
cursor:move;
}
.plupload_scroll {
max-height: 180px;
min-height: 168px;
_height: 168px;
overflow-y: auto;
}
.plupload_file_size, .plupload_file_status {text-align: right;}
.plupload_file_size, .plupload_file_status {width: 52px;}
.plupload_file_action {width: 16px;}
.plupload_file_name {
overflow: hidden;
padding-left: 10px;
}
.plupload_file_rename {
width:95%;
}
.plupload_progress {width: 60px;}
.plupload_progress_container {padding: 1px;}
/* Floats */
.plupload_right {float: right;}
.plupload_left {float: left;}
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
display: block;
font-size: 0;
line-height: 0;
}
.plupload_clearer {height: 0;}
/* Misc */
.plupload_hidden {display: none;}
.plupload_droptext {
background: transparent;
text-align: center;
vertical-align: middle;
border: 0;
line-height: 165px;
}
.plupload_buttons, .plupload_upload_status {float: left}
.plupload_message {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.plupload_message p {
padding:0.7em;
margin:0;
}
.plupload_message strong {
font-weight: bold;
}
plupload_message i {
font-style: italic;
}
.plupload_message p span.ui-icon {
float: left;
margin-right: 0.3em;
}
.plupload_header_content .ui-state-error,
.plupload_header_content .ui-state-highlight {
border:none;
}
.plupload_message_close {
position:absolute;
top:5px;
right:5px;
cursor:pointer;
}
.plupload .ui-sortable-placeholder {
height:35px;
}
I believe what you want is float: left; on your images.
Functioning example: http://jsfiddle.net/NeMDZ/2/ (Try moving the middle divider. Flexible layout is optional.)
The basic CSS:
div.imgContain {
overflow:hidden; /* Only necessary if you need to style the containing box.
Forces box to expand to content's height. */
}
div.imgContain img {
float:left;
}
All the other CSS is optional. Style at will.
img {
display: inline-box;
}
The images will set in the same line as long they fit there. Be very careful with padding and margin values.
Images are block-level elements by default, so you will need float: left on your images (or whatever element your image is contained in) if you want them to be side-by-side. If you want to start a new line, create a spacer element like:
.spacer {
clear: both;
}
and then add <div class="spacer"></div> where you want to break a line of images and start a new one. You may need other attributes on your spacer to work in old browsers.