responsive

How to make wordpress theme iframe responsive

After some research, I came across this article and ended up with the solution below. <div style=”position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;”> <iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” src=”http://slither.io/” width=”100%” height=”100%” frameborder=”0″ scrolling=”no” seamless=”seamless” allowfullscreen=”allowfullscreen”> </iframe> </div> What this code does is that it set the div’s width … Read more

Convert WP Menu to a Drop Down for Mobile browser

Here’s what I’ve put together from different articles/themes: files to modify: functions.php header.php style.css js (create folder “js” in theme root directory) The Javascript: jQuery(function() { jQuery(“<select />”).appendTo(“nav”); jQuery(“<option />”, { “selected”: “selected”, “value” : “”, “text” : “Go to…” }).appendTo(“nav select”); jQuery(“nav a”).each(function() { var el = jQuery(this); jQuery(“<option />”, { “value” : el.attr(“href”), … Read more

Can’t show custom post thumbnail sizes as background images

Use this. you will need to call thumbnail sizes. $small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), ‘small_regular’ ); $big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), ‘big_regular’ ); echo “<style type=”text/css”>”; echo “.entry-featured-image { background-image: url(‘” . $big_regular[0] . “‘); }”; echo “@media screen and (max-width:48em) { .entry-featured-image { background-image: url(‘” . $small_regular[0] . “‘); } }”; echo “</style>”;

What controls responsiveness in WordPress?

WordPress has absolutely nothing to do with responsiveness, neither does themes or plugins. Responsiveness is controlled by media queries (CSS) set in stylesheets and the particular browser the site is viewed in. It is here where screen sizes are determined and checked against available media query rules. Just one note, older browsers like IE6, 7 … Read more

Meta tag viewport

The meta tag should get inserted in the <head> section of a website. Regardless if you are using a header.php and footer.php or not, you should have a <head> section in your document. For example the code in your document should be something like: <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset=”<?php bloginfo( ‘charset’ … Read more

Video to stretch across the entire homepage [closed]

You could add negative margins to the video element. If inline (adjust as needed): <video id=”video_688987199_html5_api” class=”vjs-tech” preload=”auto” autoplay=”” data-setup=”{}” src=”https://wordpress.stackexchange.com/wp-content/uploads/2018/04/video.mp4″ poster=”null” style=”margin-left: -50px; margin-right: -50px;”> If in stylesheet (again… adjust as needed): .vjs-tech { margin-left: -50px; margin-right: -50px; } Another option is to set the width as something greater than the parent div’s width. … Read more

Featured image (responsive) above content is too small after update to WordPress 4.4

How can the global $content_width affect the post thumbnail ? Let’s check how the global $content_width can affect the output of the_post_thumbnail( ‘large’ ) and trace out the relevant function dependencies: the_post_thumbnail() \ \__ get_the_post_thumbnail() \ \__ wp_get_attachment_image() \ \__ wp_get_attachment_image_src() \ \__ image_downsize() \ \__ image_constrain_size_for_editor() and for the large size we have specifically … Read more

ACF Plugin – Random Gallery Image with wp_get_attachment_image()

<?php $images = get_field(‘gallery’); $size=”full”; // (thumbnail, medium, large, full or custom size) $rand = array_rand($images, 1); if( $images ): ?> <?php echo wp_get_attachment_image( $images[$rand][‘ID’], $size ); ?> <?php endif; ?> This code should work. array_rand() return key if second param set to 1 or array with keys if second param > 1

+ More