Demonolith

Thanks for the reply rbrtsmith, very helpful and informative. I do use arbitrary numbers as opposed to device-specific devices, but was tempted to go the other way. No need to now. I use @media(max-width: 900px) for a mobile-responsive setup, it looks quite a bit different to how it looks on desktop (I'm forever working on it as it's more of a side-project than for a demanding client). Because of this when it comes to iPads portrait orientation is altogether different in looks to landscape orientation. Bad practice? Unfortunately I use !important more than a few times and a number of smells like display: none; and padding: 0; but I'll look into it. Thanks again!

I should've used the following instead of what I originally used I think: @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .ipad-portrait { color: red; } /* your css rules for ipad portrait */ } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } My main issue was that I wanted to override certain CSS rules, but the only way I saw how was to use !important in each rule. I ended up getting my site to look how I wanted it to look simply by removing the following code. A silly oversight by me. @media only screen and (max-width: 1024px) and (min-width: 800px) { html { zoom: 0.8; // Old IE only // -moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); margin: -126px -70px 0; } } Sorry for being so confusing in my intentions, all's well that ends well though - thank you!

Sorry if I'm not following correctly, with the following code it now appears on a desktop browser of 1024px width or less - and I still need to use !important: @media screen and (max-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) { .topbanner { top: 158px; width: 100%; height: 100px; } #searchicon-m { width: 77px; top: 160px; right: 20px; } .searchpop { top: 258px; height: 70px; } input#s { width: 97%; height: 50px; } .page-id-754 .banner-slides { top: 208px; } } /* iPad [portrait + landscape] */ @media(max-width: 900px), screen and (max-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) { body { margin: 0; } a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; } img { width: -webkit-fill-available; width: -moz-available; width: 100%; height: auto; } #main-div { width: 100%; overflow: hidden; } }

Thanks, but using that means affects desktop screens to when I want it to only affect iPads in lansdcape orientation.. /* iPad [portrait + landscape] */ @media only screen and (min-device-width: 1000px) and (max-device-width: 1024px) { .topbanner { top: 158px !important; width: 100% !important; height: 100px !important; } #searchicon-m { width: 77px !important; top: 160px !important; right: 20px !important; } .searchpop { top: 258px !important; height: 70px !important; } input#s { width: 97% !important; height: 50px !important; } .page-id-754 .banner-slides { top: 208px !important; } } /* iPad [portrait + landscape] */ @media(max-width: 900px), only screen and (min-device-width: 1000px) and (max-device-width: 1024px) { body { margin: 0; } a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; } img { width: -webkit-fill-available; width: -moz-available; width: 100%; height: auto; } #main-div { width: 100%; overflow: hidden; } }

Hi all, I'm using media queries to sort out my site on an iPad (landscape orientation), it looks OK to me in portrait orientation. I'm using the following code to make changes from what I already have for a max-width of 900px: @media(max-width: 900px), only screen and (min-device-width: 1000px) and (max-device-width: 1024px) { } The only way I can override CSS from the 900px media query is to add !important to every rule, this seems like a bad move. Basically, my site looks different on mobile as to desktop. Hope this makes sense, not so sure it does but I'm not very good with words...

Yeah, I see now that the default Woocommerce CSS is terrible. I was looking at the Hestia theme, do you know how I can retain my current theme while changing only the Woocommerce elements so that effectively only the store and checkout pages change? Sorry if I veered too far off-track...

Hi all, I am getting annoying horizontal scroll on a Woocommerce page when I view portait (landscape orientation is fine) and wanted to know if anyone can help me. It seems to be as a result of the form Woocommerce has included as when I add display: none; to the .form class it fixes it (though I'd rather the info within the form stayed...). form { margin: 50px auto; position: relative; top: -51px; } Here's a page where the problem is happening I can't figure this out and could really use your help!

Is my approach unsecure? If I'm putting myself or visitors at risk then I will try a plugin.

I removed the value and required lines, but does that just leave me back at square one?

Sorry I haven't replied in a while but I was taking advantage of this rare bout of good weather we're having in the North of Ireland! I've given fisicx's Quick Contact Form (thanks!) and WPForms Lite a go and I can't seem to customise them fully to match my original contact form (ie pop-up validation such as 'This field is required' and to be taken to a separate thank you page). Neither seems to email to the Hotmail address whereas my own does. I replaced my original PHP with what BrowserBugs provided and it seems to work (though with Javascript turned off it just takes you to a blank page without submitting the actual form so I'm not sure...). When I add the extra lines of code to the HTML it gives me what appears in the attached image. Am I getting closer with my own form? <div class="form"> <form id="myform" class="cssform contact_form" action="http://www.greencastleparish.com/wordpress/wp-content/themes/ourladyofwayside/contact-us.php" method="post"> <?php if($err_msg!="") { ?><div><?php echo imp($err_msg); ?></div><?php } ?> <ul class="field"> <li><label id="Name">Name</label> <input class="cssform-field" name="Name" type="text" data-bvalidator="required" placeholder="Enter your full name here" value="<?php if($name!="") { echo htmlspecialchars(stripslashes($name)); } ?>"> </li> </ul> <ul class="field"> <li><label id="Email">Email</label> <input class="cssform-field" name="Email" type="text" data-bvalidator="required,email" placeholder="Enter your email address here" required="required" value="<?php if($email!="") { echo htmlspecialchars(stripslashes($email)); } ?>"> <span class="form_hint"><strong>Example</strong> name@something.com</span> </li> </ul> <ul class="field" style="text-align: left;"> <li><label id="Comments">Comment(s)</label> <textarea class="cssform-field" name="Comments" rows="5" data-bvalidator="required" placeholder="Enter your comment(s) here" required="required"><?php if($comments!="") { echo htmlspecialchars(stripslashes($comments)); } ?></textarea> </li> </ul> <div class="g-recaptcha" data-sitekey="6LdrHSkTAAAAABGTS7K2RsSedXKYWiWf0mAGhcjF"></div> <ul class="submitwrapper"> <li> <div class="inforequired"><em>*Information is required</em></div> <div class="submitbutton"><input alt="Submit" src="http://greencastleparish.com/wordpress/wp-content/uploads/2017/11/olw-submit.svg" style="width: 88px;" type="image" value="Submit" /></div></li> </ul> </form> </div><!-- form --> <?php function imp($var) { return htmlspecialchars(stripslashes($var)); } if($_SERVER['REQUEST_METHOD']=="POST") // Check it was posted else simply going to the processor would send the email $ok_to_send = true; // Default we want to send $name = trim($_POST['Name']); // Trim removes whitespace at the ends of a string if($name=="" && $ok_to_send) { $ok_to_send = false; $err_msg = "Error! Please provide your name."; } $email = trim($_POST['Email']); // Trim removes whitespace at the ends of a string if($email=="" && $ok_to_send) { $ok_to_send = false; $err_msg = "Error! Please provide your email address."; } elseif($ok_to_send && !filter_var($email, FILTER_VALIDATE_EMAIL)) { $err_msg = "Error! Your email address appears to be invalid."; $ok_to_send = false; } $comments = trim($_POST['Comments']); // Trim removes whitespace at the ends of a string if($comments=="" && $ok_to_send) { $ok_to_send = false; $err_msg = "Error! Please provide your comment(s)."; } $captcha = $_POST['g-recaptcha-response']; $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=-----&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if($response.success==false) { $err_msg = "You are spammer!"; } if($ok_to_send) { // Here is where you form and send the mail. $referrer = "Unknown"; if($_SERVER['HTTP_REFERER']!="") { $referrer = $_SERVER['HTTP_REFERER']; } $sTo = "nialldevlin@hotmail.com"; $replyTo = "Reply-To: " . $name . " <" . $email . ">".PHP_EOL; $subject = "New message from " . $name; $email_message = "This message was sent from: $referrer <br><br>" . PHP_EOL; $email_message .= "---------------------------------------------------------------- <br><br>" . PHP_EOL; $email_message .= "Name: $name<br>" . PHP_EOL; $email_message .= "Email: $email<br><br>" . PHP_EOL; $email_message .= "---------------------- COMMENT(S) ----------------------<br>" . PHP_EOL; $email_message .= nl2br("$comments<br>") . PHP_EOL; $email_message .= "----------------------------------------------------------------<br>" . PHP_EOL; ini_set("sendmail_from", " info@greencastleparish.com "); if(mail($sTo, $subject, $email_message, "From: Greencastle Parish Website <info@greencastleparish.com>\n" . "MIME-Version: 1.0\nContent-type:text/html;charset=UTF-8\n-f" . $replyTo)) { header("Location: http://greencastleparish.com/wordpress/our-lady-of-wayside/contact-us/thank-you"); exit(); } else { $err_msg = "Whoops! Sorry but the email didn't send."; } } ?>

Thanks fisicx

This is how I currently have it functioning. I wanted to see it as a challenge to learn from. I also don't know how much freedom for customisation there is if I use a plugin. In saying that, I'm looking at the WPForms Lite plugin as Plan B!

Would this mean putting the PHP in header.php? I don't know how to add it to a single page using wordpress.

I have all the PHP code on it's on page (/wordpress/our-lady-of-wayside/contact-us.php) while the Wordpress page containing the form is /wordpress/our-lady-of-wayside/contact-us/.

Sorry, but how do I implement that into the code I've already written?

I noticed that I've been getting a few emails with the bare content (text I inserted into the email) but not with the user content in it, basically I get this: Why might this be happening? I can't send an empty email myself as validation prevents me from doing so. Edit: The form sends fine if the required information is entered

After looking into it more, it seems that the 'WP Super Cache' plugin is prevent the content coming through - I haven't yet found out why that is though. I've removed the inputs for what I intended to be mobile phone screens, I originally did this because I wanted the label to appear inside the box rather than outside as it is on desktop screens (it looks tidier on small screens that way to me). Is there an easy way to do this? I'm pretty much learning as I go along, this site is voluntary and I use it to learn skills and coding while striving to make it as good as I can - I realise that the code is a little messy and as a result not as functional and streamlined as it could be.

Hi all, I have a PHP contact form that doesn't seem to want to work, it did before and no longer does for a reason I'm unaware of. An email is sent to my inbox with the contents I set in the code, the problem is that the content provided by the user (name, comments etc.) remain empty - I've tested it myself and information I enter is not shown in the email. This used to work for me without this happening, but somewhere along the line it stopped - I don't think I made any major changes to the coding. Can anyone please help? <div class="form"> <form id="myform" class="cssform contact_form" action="http://www.greencastleparish.com/wordpress/wp-content/themes/ourladyofwayside/contact-us.php" method="post"> <ul class="field"> <li><label id="Name">Name*</label> <input class="cssform-field" name="Name" type="text" data-bvalidator="required,alphanum" /> <input class="cssform-field-m" name="Full Name" type="text" data-bvalidator="required,alphanum" value="Full Name*" onblur="if(this.value=='')this.value='Full Name*';" onfocus="if(this.value=='Full Name*')this.value='';"> </li> </ul> <ul class="field"> <li><label id="Email">Email*</label> <input class="cssform-field" name="Email" type="text" data-bvalidator="required,email" /> <span class="form_hint"><strong>Example</strong> name@something.com</span> <input class="cssform-field-m" name="Email Address" type="text" data-bvalidator="required,email" value="Email Address*" onblur="if(this.value=='')this.value='Email Address*';" onfocus="if(this.value=='Email Address*')this.value='';"> </li> </ul> <ul class="field"> <li><label id="Telephone">Telephone<span style="color: #fff;">*</span></label> <input class="cssform-field" name="Telephone" type="text" /> <input class="cssform-field-m" name="Telephone Number" type="text" value="Telephone Number" onblur="if(this.value=='')this.value='Telephone Number';" onfocus="if(this.value=='Telephone Number')this.value='';"> </li> </ul> <ul class="field" style="text-align: left;"> <li><label id="Comments">Comment(s)*</label> <textarea class="cssform-field" style="width: 304px;" name="Comments" rows="5" data-bvalidator="required,alphanum"></textarea> <textarea class="cssform-field-m" name="Comments" rows="5" data-bvalidator="required,alphanum" value="Comments" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> Comment(s)*</textarea> </li> </ul> <ul class="field"> <li class="gdpr-checkbox"><input type="checkbox" id="gdpr-checkbox" name="gdpr" value="GDPR" data-bvalidator="required">I consent to having this website store my submitted information so they can respond to my enquiry.*</li> </ul> <div class="g-recaptcha" data-sitekey="-----"></div> <ul class="submitwrapper"> <li> <div class="inforequired"><em>*Information is required</em></div> <div class="submitbutton"><input alt="Submit" src="http://greencastleparish.com/wordpress/wp-content/uploads/2017/11/olw-submit.svg" style="width: 88px;" type="image" value="Submit" /></div></li> </ul> </form> </div><!-- form --> <?php /** Contact Us Form **/ $formurl = "http://greencastleparish.com/wordpress/our-lady-of-wayside/contact-us" ; $thankyouurl = "http://greencastleparish.com/wordpress/our-lady-of-wayside/contact-us/thank-you" ; $uself = 0; $headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ; $name = $_POST['Name'] ; $email = $_POST['Email'] ; $telephone = $_POST['Telephone'] ; $comments = $_POST['Comments'] ; $captcha = $_POST['g-recaptcha-response']; $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=-----&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if($response.success==false) { echo '<h2>You are spammer ! </h2>'; }else { echo '<h2>Thanks for posting comment.</h2>'; } $http_referrer = getenv( "HTTP_REFERER" ); $subject = "[Greencastle Parish Website] New message from $name"; $comments = "This message was sent from:\n" . "$http_referrer\n" . "------------------------------------------------------------\n\n" . "Name: $name\n" . "Email: $email\n" . "Telephone: $telephone\n" . "------------------------ COMMENT(S) ----------------------\n\n" . $comments . "\n\n------------------------------------------------------------\n" ; mail("nialldevlin@hotmail.com", $subject, $comments, "FROM: info@greencastleparish.com" . $headersep . "Reply-To: \"$name\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.07" ); header( "Location: $thankyouurl" ); exit ; ?>

I'm not sure yet where would store the emails, but it would be with a service - either Yahoo or Hotmail. I will not receive the emails myself, they will go to my client and I would tell them to delete the emails after a set amount of time - 30 days and state that in the policy, The site in question would be for covering past events in a local area - not for booking events etc. but just for people to read about the place if that makes sense. The only reason people would need to use the form would be to ask about the history of the area or for information that would be stored in records off the website such as parish records. These records would be entirely unrelated to the website.

Excuse my ignorance on this, but my form is just for a user to send an email. I don't believe it stores the personal information (name, email address and telephone number) on the site - am I wrong on this? Is the following wording incorrect? I consent to having this website store my submitted information so they can respond to my enquiry. To learn how we store this information read our privacy policy. <div class="form"> <form id="myform" class="cssform contact_form" action="---" method="post"> <ul class="field"> <li><label id="name">Name*</label> <input class="cssform-field" name="Name" type="text" data-bvalidator="required,alphanum" /> <input class="cssform-field-m" name="Full Name" type="text" data-bvalidator="required,alphanum" value="Full Name*" onblur="if(this.value=='')this.value='Full Name*';" onfocus="if(this.value=='Full Name*')this.value='';"> </li> </ul> <ul class="field"> <li><label id="Email">Email*</label> <input class="cssform-field" name="Email" type="text" data-bvalidator="required,email" /> <span class="form_hint"><strong>Example</strong> name@something.com</span> <input class="cssform-field-m" name="Email Address" type="text" data-bvalidator="required,email" value="Email Address*" onblur="if(this.value=='')this.value='Email Address*';" onfocus="if(this.value=='Email Address*')this.value='';"> </li> </ul> <ul class="field"> <li><label id="Telephone">Telephone<span style="color: #fff;">*</span></label> <input class="cssform-field" name="Telephone" type="text" /> <input class="cssform-field-m" name="Telephone Number" type="text" data-bvalidator="required,alphanum" value="Telephone Number" onblur="if(this.value=='')this.value='Telephone Number';" onfocus="if(this.value=='Telephone Number')this.value='';"> </li> </ul> <ul class="field" style="text-align: left;"> <li><label id="Comments">Comment(s)*</label> <textarea class="cssform-field" style="width: 304px;" name="Comments" rows="5" data-bvalidator="required,alphanum"></textarea> <textarea class="cssform-field-m" name="Comments" rows="5" data-bvalidator="required,alphanum" value="Comments" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> Comment(s)*</textarea> </li> </ul> <input type="checkbox" name="gdpr" value="GDPR" data-bvalidator="required,gdpr">I consent to having this website store my submitted information so they can respond to my enquiry. To learn how we store this information read our <a href="---" target="blank">privacy policy</a><span style="color: #fff;">*</span><br> <div class="g-recaptcha" data-sitekey="---"></div> <ul class="submitwrapper"> <li> <div class="inforequired"><em>*Information is required</em></div> <div class="submitbutton"><input alt="Submit" src="http://greencastleparish.com/wordpress/wp-content/uploads/2017/11/submit.svg" style="width: 88px;" type="image" value="Submit" /></div></li> </ul> </form> </div><!-- form --> <?php /** Contact Us Form **/ $formurl = "---" ; $thankyouurl = "---" ; $uself = 0; $headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ; $name = $_POST['Name'] ; $email = $_POST['Email'] ; $telephone = $_POST['Telephone'] ; $comments = $_POST['Comments'] ; $captcha = $_POST['g-recaptcha-response']; $response=file_get_contents("---".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if($response.success==false) { echo '<h2>You are spammer ! </h2>'; }else { echo '<h2>Thanks for posting comment.</h2>'; } $http_referrer = getenv( "HTTP_REFERER" ); $subject = "New message from $name"; $comments = "This message was sent from:\n" . "$http_referrer\n" . "------------------------------------------------------------\n\n" . "Name: $name\n" . "Email: $email\n" . "Telephone: $telephone\n" . "------------------------ COMMENT(S) ----------------------\n\n" . $comments . "\n\n------------------------------------------------------------\n" ; mail("---@---.com", $subject, $comments, "FROM: ---@---.com" . $headersep . "Reply-To: \"$name\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.07" ); header( "Location: $thankyouurl" ); exit ; ?>

Thanks fisicx, The checkbox would be unchecked by default and required in order for the form to be sent so I wouldn't be forcing consent. I will link it to my privacy policy.

Hi all, I have a PHP contact form that I am using on a site - is adding a required checkbox to the form with the following line or similar enough to make it [the form] GDPR compliant? I prefer not to use a plugin.

Thanks fisicx

Hi all, I have a CSS rule that I wish to change the margins of, but I can't be sure where else on the site I've used the CSS rule and how it would impact other pages. Is there a way that I can search the entire Wordpress site for pages where the CSS rule is used?

Thanks Nillervision, is this more suitable? <div class="gallery-wrapper"> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </div> <!-- gallery-wrapper -->