responsive screen not working [closed]

To get responsiveness similar to the image link you gave, you need to set width=100% and height=auto for the image.

In your jsfiddle example, you did the width part okay (defined it as a % of available space) but you are fixing the height – both for the outer box as well as the inner boxes. So no matter what you do, the height will stay the same. That will give distorted images when scaled.

So if you want responsively scaled images,

  • Define one of the two (height or width) as a % of available space (you did this right)
  • Define the other as auto – so that it scales properly
  • Adjust the rest of the design to suit (so that other elements don’t walk out of your layout).

Related Posts:

  1. Where are Additional CSS files stored
  2. How to include own css on wordpress tinymce editor?
  3. How to customize the default HTML for WordPress Attachments
  4. Is it possible to change the attributes of a registered style or script before it fires?
  5. FireFox Inspector :: find CSS file related to
  6. Custom CSS for full post vs. excerpt (Content Options)
  7. How to get WordPress to accept the tag in articles (or other alternatives)
  8. How to remove padding and margin between divi rows? [closed]
  9. What will happen to the additional CSS when the theme is updated?
  10. How to display post title & excerpt when mouse hovers on an image?
  11. Include user defined styles without including wp-load
  12. Video to stretch across the entire homepage [closed]
  13. Cannot figure out how to center div in WordPress theme [closed]
  14. Customizing default Mediaelement player
  15. how can I change the background color of all posts on my server?
  16. CSS to remove “comments count” icon from main page [closed]
  17. how to add custom css and js on wordpress post editor directly without using .php file
  18. TwentyFifteen: How can it show a different color on every post page?
  19. Adding code to child’s theme css and php cannot override certain elements
  20. Add clickable arrows to parent menu items with children elements e.g. with
  21. Is it possible to add a ribbon in the background of h1 on every page?
  22. Resizing of a header/div in a website through css in wordpress [closed]
  23. Child Theme with multiple css files
  24. CSS Customizations for certain page
  25. Custom CSS at Appearance > Edit CSS is missing after update [closed]
  26. CSS Styling a specific page
  27. How to remove footer from just homepage
  28. Why the css in twenteenfourteen-child theme take no effect?
  29. How to format text of site subtitle
  30. how to add custom logo to my template
  31. WordPress noob, assign custom stylesheet using @import or if? Didn’t work for me
  32. str_replace inside specific css files [closed]
  33. Good way to customize admin CSS?
  34. css media query question [closed]
  35. How to customize the WordPress 2014 theme, to have page using less horizontal margin?
  36. Remove header title form page through CSS [closed]
  37. Centering one product on a single page [closed]
  38. How To Style Links in Content Area With Tag Automatically?
  39. Inline-Table under TwentyTwelve not working
  40. custom css and javascript not working on page defined as template?
  41. WordPress menu: How to make www.link.com/#name never contain current_page_item class?
  42. How to add Custom Css within the Editor?
  43. Will WordPress updates remove Gutenberg Additional Classes?
  44. Custom CSS Nav Menu Style Not Being Applied
  45. custom email validation using javascript api with elementor pro and code snippets
  46. Style WooCommerce Product Search Widget
  47. why won’t my custom css load with the enqueue method or any other method?
  48. Use Theme CSS in custom code
  49. How can I style the Comment Section of a blog post
  50. Hide entry-header for a specific category
  51. How do I make elements in mobile only reverse order?
  52. How to style bootstrap container in WordPress?
  53. WordPress 5: including larger thumbnail image sizes in srcset than I have set
  54. how to add custom html and css to wordpress
  55. How can I delete the word `Category:` from page titles? [duplicate]
  56. How to have different background image based on post category
  57. How replace theme styles?
  58. Wrap WordPress Login Form in custom Div
  59. Customize WP website specific column with CSS
  60. How do I target this page specifically?
  61. How do I change the content of an element for a theme without losing the styling?
  62. I can’t override CSS
  63. Two color in one Heading
  64. Move text from the side of image to below image [closed]
  65. WordPress Inline Style missing
  66. Style Radio Buttons inside Edit Page (Custom Fields)
  67. Adding separate CSS files for separate pages with functions.php
  68. How to echo custom styles in css format?
  69. Background setting isn’t applied to entire sidebar height
  70. Special characters showing in fallback font
  71. How to support extra color options for shortcodes?
  72. Adding css and js to a blank page created with custom template
  73. Will too many overridden css rules lead to performance issues
  74. Complete Custom Style Part of Site
  75. add custom css on all page exept of one
  76. Making custom pages (with an example to explain the goal)
  77. Custom CSS File wont work on second Page
  78. how can i change the html and the css of my word press theme that I bought?
  79. Edit image alignment in WordPress twentysixteen child theme on attachment page [closed]
  80. adding new html css to wordpress section from codepen [closed]
  81. use another theme for just one page
  82. Instead of Custom CSS Theme CSS is loading
  83. How do I add custom CSS animations for specific Gutenberg blocks?
  84. Particle.js not loading in WordPress Gutenberg
  85. Cannot add custom css in site
  86. Custom CSS working on home page but not on NEW created PAGE
  87. Post interior margin in twenty eleven theme
  88. Disable all Fonts that are Standard in WordPress and replacing them with a custom Font?
  89. Modifying posts based on category in TwentyTwentyTwo theme
  90. How to display product variations on same row
  91. Add custom styles to the Raft theme
  92. Where did I put this one line of css?
  93. simple expandable vertical menu, java script problem
  94. Best way to integrate an existing PHP application into WordPress
  95. How to move meta information in TwentyTwelve’s single post template?
  96. saving the widgets position after drag and drop
  97. Open login logo URL in new tab
  98. Delete a column in edit.php generated with a plugin
  99. Migrating my site to a new domain does not keep any changes made in customizer
  100. Where to put coding a validation script for store? [duplicate]