I'm working on a website for a friend, everything goes well so far, but there's one little thing I can't seem to figure out.
I have included SmartSlider 2, which I want to hide on mobile devices. But since SS2 doesn't natively support this I tried by editing the code. Long story short, it won't work.
I've tried including the CSS in the file itself (header.php) :
<div class="slider" style="#media(max-width:1120px;){.slider {display:none;}}">
<?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>
For some reason, it still shows up, hopefully you guys can help me out. Thanks in advance.
It will not work like you are trying.
you have to put this in custom css
#media screen and (max-width: 1120px) {
.slider {
display:none;
}
}
and remove from here
<div class="slider">
<?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>
and in media query CSS you have ; here #media(max-width:1120px; it's wrong
Fiddle
Related
In my footer.php file, I have this bit of code towards the end of the file:
<?php wp_footer(); ?>
<div class="website-by">
<br>
Website by Gateway Web Design
</div>
</div>
</body>
As you can see, I've created a "website by" link, which links to another website when clicked on.
But I don't want this text, or the div that contains it, to appear at all on the home page of the site:
https://thehamburgercollection.com/
I've checked other stackoverflow articles that suggest doing so with JQuery, which I've added to my scripts.js file:
//hide link on the home page
document.ready(function() {
if (window.location.href.indexOf('https://thehamburgercollection.com/')) {
//Hide the element.
jQuery('.website-by').hide();
}
});
And I've also tried hiding the div on the home page with CSS that was suggested here:
.home .website-by {
display: none;
}
But unfortunately neither of these methods have worked. I've declared my class as website-by in the footer.php file, and have added the JQuery that should target that class in the scripts.js file, and have also added the suggested CSS. Any idea why either the JQuery or CSS code isn't working?
This is a WordPress website and a custom there. Any help / suggestions / education is appreciated!
I'm not a WordPress guru, but have you tried doing an if condition in the footer.php? if I got your question right, you need the .website-by to not appear elsewhere but the home page. Maybe something like
<?php wp_footer(); ?>
<?php if (!is_home()): ?>
<div class="website-by">
<br>
Website by Gateway Web Design
</div>
<?php endif; ?>
</div>
</body>
Hello I m using Polylang and this php code to switch my slider (I did with Smart Slider) to english-french. I don't know anything about PHP but I got it on a forum. It was working perfectly until yesterday.
http://www.chooseyourtelescope.com/
<?php
$currentlang = get_bloginfo('language');
if($currentlang=="fr_FR"):
?>
<div>
<?php
echo do_shortcode('[smartslider3 slider=6]');
?>
</div>
<?php else: ?>
<div>
<?php
echo do_shortcode('[smartslider3 slider=4]');
?>
</div>
<?php endif; ?>
Now it stays in english. I dont think the problem is coming from Smart Slider. I tried to deactivate the other plugins and to restore the previous theme and Polylang versions but nothing changed.
BTW my site is responsive and the slider is not displaying under 800px width. So you can't see the problem on mobile for example.
Instead of doing it with php I resolved the problem with css: I put both english and french sliders in my header template with different classes and "display:none" the slider I don't want for each frontpage:
.page-id-94 .smartslider-en {
display:none;
}
.page-id-7386 .smartslider-fr {
display:none;
}
Please answer if you find a solution with php only.
Here s the solution :
<?php if(get_locale() == 'fr_FR') : ?>
Actually the "get_bloginfo('language')" function stopped working since I upgraded to WordPress 4.6 and to Polylang 2.0.3.
The website is http://www.mercuriusresearch.co.uk which runs on Wordpress and based on Bootstrap.
The error shows when you resize the screen below 768px, all the post title links stop working. The actual HTML is still showing the href but the post titles just behave like normal text.
The error is displaying across the website (i.e. on all post title links) but only on those sections of the page that are taking links from Wordpress. For example, the sidebar links on my homepage work on all screen sizes.
I haven't had this problem before. My suspicion, based on the previous paragraph, is that it relates to Wordpress somehow...but I am using the same code that I always use to bring in the titles from Wordpress. So that, and the fact that the error appears to relate to the size of the screen, leads me to think that Bootstrap is somehow related too.
Any help would be much appreciated.
The only code that isn't on the website is this, which is the Wordpress loop:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-date">
<?php k99_relative_time(); ?>
</div>
<div class="post-title">
<?php the_title( sprintf( '<h3 class="entry-title">', esc_url( get_permalink() ) ), '</h3>' ); ?>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
Read more →
</div>
</article>
As I say though, this is working on larger screen sizes and if there was something wrong with this section, it obviously would occur on all screen sizes. All the other code is there on the website (obviously, I am not sure what part exactly is relevant, or I wouldn't I have this problem).
For a quick solution, you can write CSS using media query for devices below 768px and your links will work fine.
#latest-news-front,
#stock-ideas-front {
position: relative;
z-index: 10;
}
There is a div that covers all of the other divs you use.
If you look in your element inspector you can see the div.
You can float the sidebar-front div, but there is a change that other divs will behave different.
aside#sidebar-front {
float: left;
}
or clear every div by using the following code at the end of each one.
clear: both;
So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?php get_header(); ?>
<div id="middle" class="clearfix">
<?php // Get the header image
$hi = getHeaderImage();
if($hi) :
?>
<div id="pageHeadImage" class="" >
<div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
<div id="projectTitleDiv">
<span class="aligner"></span>
<h1 class="projectTitle"><?php the_title(); ?></h1>
</div>
</div>
</div>
<?php endif;?>
Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}
I'm trying to use the is_page conditional tag to create a slider that displays different sets of images depending on the page.
Below I've created an example of the code I'm using. All I'm getting back is a blank page and I'm really not sure why. Everything I've looked at on Google tells me my Syntax is correct (At least from what I can tell).
I am using the is_page tag before the loop in WordPress so that shouldn't effect it as far as I'm aware. Please correct me if I'm wrong.
I tried placing <?php wp_reset_query(); ?> just before the loop too, but it had no effect.
Any ideas what I might be doing wrong?
EXAMPLE:
<div id="container">
<?php if (is_page('123') || is_page('356')){ ?> // check page, if any are true display image
<img alt="" src="<?php bloginfo('template_url');?>/images/image1.jpg" width="650" />
<?php } ?>
<?php if (is_page('123') || is_page('356') || is_page('638') || is_page('1199')){ ?> // check page, if any are true display image
<img alt="" src="<?php bloginfo('template_url');?>/images/image2.jpg" width="650" />
<?php } ?>
</div>
PROBLEM SOLVED:
<?php
// THIS GIVES US SOME OPTIONS FOR STYLING THE ADMIN AREA
function custom_design() {
echo '<style type="text/css">
#wphead{background:#592222}
#footer{background:#592222}
#footer-upgrade{background:#592222}
textarea {white-space:nowrap;overflow:scroll;}
</style>';
}
add_action('admin_head', 'custom_design');
?>
It seems this piece of code in my functions.php was causing the error. The CSS "whitespace:nowrap" was breaking any new template pages I was making. Totally bizarre. Never seen CSS do that before, at least not to that extent.
Sorry for wasting your time guys, thank you for the help. At least I know I wasn't going crazy now.
:)