Gallery widget

• 

  mousesibs · Member · Apr 11, 2017 at 6:02 pm

  • Copy link
  • Add topic to favorites

  I want my gallery widget in the footer to stretch across the whole footer. Beneath it, I want my image widgets to show in two columns. What CSS code can make my gallery widget the full width?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 12, 2017 at 2:33 am

  • Copy link

  Hi there, with the gallery widget, when you insert it, the software retrieves the original width for the widget in the particular sidebar you are putting it in and it creates the images, off of your original uploaded images for that size. We can make the images full width, but when doing that with CSS, what we are doing is asking the browser to resize that image, which is only 265px in width to over 1000px in width, and so the image quality is going to suffer dramatically. You can add the following to your custom CSS and save and then visit your site to see how fuzzy and pixelated your images become.

  body div.slideshow-window * img {
  width: 100%;
  }

  Since you are using a static front page, my suggestion would be to add that gallery in the content area below the text you have there now and it will come in at nearly full width of that area. Then, just have the image and text widgets in the footer area. If you wish to have those image widgets in two columns, each about 50% of the width, I would suggest putting half of them in footer 1, half in footer 2, and then nothing in footer 3, and then go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  #widget-area-1, #widget-area-2 {
    max-width: 45%;
    width: 100%;
  }

  You can play with which ones you put in which widget area so that things will come out pretty even vertically.

  Give the above a try and see what you think.