Countless types of uses for responsive layouts

We adapt and test the style layouts for mobile devices, tables and smart phones 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 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 be get smaller without loosing the right proportion.


Here are more blog posts about our fluid images:


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, tables, smart phone)
  1. Responsive Rows, Post Alteration and fluid images

The upper  shortcode use 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 a 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 get smaller. The both two images among them change on the tablet screen size from side by side to among themselves. At the smart phone size all three images adapt there width to the screen and shows 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 like the first shortcode. The different is only one image gets a new row. The other two are side by side. The first shortcode know only ether as row or as 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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *