Articles of responsive

Don't load scripts if on mobile/tablet

Would like to ask the question is it possible to stop the laoding of some scripts when viewed on a mobile/tablet device ? In the theme functions file you have wp_enqueue_script(…). How would you go about loading if based on device/screen size.. Is this possible?

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

In my theme, I placed a featured image of a page above both the content and sidebar columns, spanning both columns, using <?php the_post_thumbnail(‘large’); ?> where “large” size is defined as 980px. Their width is responsive thanks to css. This worked fine until the WordPress 4.4 upgrade. After the update, which includes the core responsive […]

What controls responsiveness in WordPress?

I am testing a WP install along with a custom theme made by third parties. The theme per se is responsive, however in some situations, at particular resolutions, parts of the page will be blank although it looks like there would be enough space to fit objects. For instance take a look here (the 3 […]

Get a list of all image sizes that match aspect ratio of original one

I need the same functionality as default WordPress wp_calculate_image_srcset() method which returns the string for srcset: image-300×200.jpg 300w, image-600×400.jpg 600w, … but it should return an array instead of string, with structure similar to: $image_sizes = array( array( ‘url’ => ‘image-300×200.jpg’, ‘width’ => 300, ‘height’ => 200 ), array( ‘url’ => ‘image-600×400.jpg’, ‘width’ => 600, […]

$content_width for responsive UI

In our “mobile first” age a theme without responsive UI is treated like from stone age. It means that a theme could have different content width for different devices. But one of requirements for theme development is to provide $content_width variable which should contain actual width of content area of a theme. Taking in consideration […]

What tags should be used for themes to show the type of layout?

In the Tag Filter the old tags ‘fixed-width’ and ‘flexible-width’ were renamed to ‘fixed-layout’ and ‘fluid-layout’. Also new ‘responsive-layout’ tag appears. Should users duplicate new tag ‘fluid-layout’ with old tag ‘flexible-width’? Or is it safe to use only new tags?

Excess White Space Above Admin Bar on Frontend Using Twitter Bootstrap

The problem (Excess White Space Above Admin Bar on Frontend Using Twitter Bootstrap): While logged in and viewing the frontend — If you shrink your browser down, there is an excess amount of white space which appears ABOVE the admin bar. I’ve noticed it’s fine in full screen, and even ~tablet size. However, when about […]

How to use the responsive images feature from WP 4.4 in your themes

I don’t really understand how I can use the new responsive images feature that WordPress provides in my themes. Example: In my theme, I add a header-image. I therefore use the custom-header-image from customizer OR the post-thumbnail: <figure id=”header-image” class=”uk-margin-remove”> <?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?> <?php […]

How do I make featured images retreived by the_post_thumbnail() responsive?

I am trying to make the featured images retrieved by the_post_thumbnai() in the loop responsive, but can’t seem to find a simplified solution. The logic I want to implement is something like this: If the screen size is less or equal to 728px the_post_thumbnai(‘thumbnail’) //Display the thumbnail size image Else the_post_thumbnai() //display the original size […]

Get specific image size for small viewport width

Im trying to get this featured image only when wiewport is < 768: add_image_size( ‘img-movil’, 660, false ); I have no much coding skills. I was reading about how to pass a variable from JS to PHP with jQuery $.ajax() but I don’t understand it completely. This is what I did: First step. I try […]