If the screen width is 1200px, but only two columns are displayed, images get floated to the left and the content floats around it. The image styles are dependent on the number of columns being displayed on the page. This ensures that no matter the page width, content width or the device width, the layouts will be consistent based on the number of columns being displayed. Once the classes are in place, adding styles is simple. In this case, it is the “a” tag that holds the featured image or the logo. The code adds the class grid1, grid2 etc to the specific selector. Var images = document.querySelectorAll("#_block. Window.addEventListener("resize", outputGridData) Ĭonst columnCount = idColumnCount Window.addEventListener("DOMContentLoaded", outputGridData) GridColumnSizes: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").map(parseFloat) GridRowSizes: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").map(parseFloat), GridColumnCount: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length, GridRowCount: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length, Business Directory layouts with default and full width pagesĬonst gridComputedStyle = window.getComputedStyle(businesslist) If we used the Twenty Twenty theme with the default page layout, even on a desktop, the content width is smaller and the number of columns would be different when using the responsive layout. The number of columns showing on the page depends on the width of the device and the with of the page itself, or to be specific, the content width of the page. This could probably be done using media queries, but it is not easy. If the page had only one column, it should show similar to the one column layout, and if the page had 2, 3 or 4 columns, it should show similar to the other column layouts respectively. We wanted the listings to look consistent in all formats. The columns in the responsive layouts change based on the width of the page or the content width. We had to maintain consistency between the specific column layouts and the responsive layout. When it came to styling the images and the text around it, it was not easy. They have the option to choose from 1, 2, 3 or 4 column layout or a responsive layout. So, the users could choose the number of columns, the image to display (featured image or logo) and the size of the image along with other options while displaying their business directory listings. This was a new option which was not in the shortcode. When I was working on converting the Business Directory shortcode to a Gutenberg block, we added options to select the image size. If we want to add styles based on the number of columns showing on the page though, we need to use JavaScript. We can style these columns using media queries for different browser widths. CSS Grid or Flexbox takes care of resizing and the columns nicely stack as needed in smaller view ports. Few lines of CSS and the columns resize nicely based on the width of the page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |