Countless types of uses for responsive layouts

We adapt and test the style layouts for mobile devices, tablets and smartphones again. We want to give styles which are made for responsive websites. To achieve that and support all screen sizes for your layout we had fluid images.

What do we mean with “Styles”?

The widget support many layout styles and the feature for post list alteration. What do we mean? You can find a panel with the name Style. There are two options, the Layout and the Post Alterations drop downs.

What are the fluid images?

WordPress images are stored at your web server in different sizes. The WordPress image HTML use the best-fit image size for the actual screen. We use this best-fitted image and crop it at the client site with CSS and less Javascript. With this fluid images you have the possibility to set image dimensions. Your set image dimensions for width and height are like the CSS attribute “max-width”. If there is not enough free space for your image, it will get smaller without losing the right proportion.

Here are more blog posts about our fluid images:

Term and Category Posts

This both implementation are not new in our widget and we only fixed some wrong code lines. There are a lot of design questions which make better and better website layouts and each question will get the right answer.

Two examples to place the shortcode in the content

Here is our example site where we set two shortcodes on above the other.

Style options for responsive layouts (Desktop, tables, smart phone)
Style options for responsive layouts (Desktop, tablet, smartphone)
  1. Responsive Rows, Post Alteration and fluid images

The upper shortcode uses the Style: Responsive rows,  Post Alteration: Last items and starts after item: 1.

The first image dimension is 710 x 320 px with animation on mouse hover: Zoom and an image position: Top.  For all other images we set the dimension 350 x 220 px, the same hover effect and position. But the number of posts to show is: 3.

As you can see on the screenshot above the first big image is adapted the width to the screen size. With smaller screen sizes the image width gets smaller. The both two images among them change on the tablet screen size from side by side to among themselves. At the smartphone size all three images adapt their width to the screen and show the whole image. Nothing is cut or out of the viewport.

  1. Masonry layout, Post Alteration and fluid images

The example among them use the Style: Masonry, Post Alteration: Repeat Pattern with Start after: 3, For: 1 and Repeat after: 3.

The image dimensions for the first three is 225 x 180 px. The big pictures have a dimension 710 x 430 px.

The behavior for smaller screen sizes is similar to the first shortcode. The difference is only one image gets a new row. The other two are side by side. The first shortcode knows only ether as a row or as a column.

The changes we made are also available with the download link for the 4.7.1. zip file. You can download the code and update it manually with an overriding or wait till we release the 4.8 in less weeks.