Images in Footer Area – Footer Collapses

Sounds like you need to add some more CSS, so try:

.textwidget img {
display: inline-block;
width: 20%;
}

Need to see site with 2nd image to get this right

rdellconsulting,
Thanks. I have put all the three images. You can check it now. In the mean time, I will be trying the css as you suggested – I will try “footer-widgets’ instead of “textwidget” as I don’t want images in other areas to get effected.

See if can figure it out.

Thank you.

rdellconsulting,
FYI, The element identifiers for the 3 footer image areas are
#enhancedtextwidget-9 (10, and 11)

Step 1: Targetting selectors

/* images in Footer Area */
#footer_one {width:100%;}
footer#footer .textwidget img  {
display: inline-block;
width: 20%;
height: 150px;
margin: 40px 40px;
}

Something still not letting me get the images inline. I’ll keep looking.

Google inline-block and you’ll find articles like this

OK, start playing with this:

/* images in Footer Area */
#footer_one {width:100%;}
footer#footer .textwidget img   {
display: inline-block;
width: 20%;
height: 225px;
float: left;
}

rdellconsulting,

Embarrassing! All my bad.
Looking at the stacking images, it occurred to me that this type of things do happen when somewhere a tag has been left open. I checked back, and that was the case. I had not closed the “style” attribute in the img html!

It is now OK. You can check it.

rdellconsulting, you are GREAT! helping out the ‘not so experienced ones’. I am going to copy and keep your suggestions for future reference.

Thanks a lot.

[Marking it ‘resolved’]

That’s great detective work Sherlock! Glad it’s working.

Reading “Sir Arthur Conan Doyle” books is finally paying off!

Off the topic, what may be the best way to restrict the ‘max width’ of the site while still maintaining the ‘responsiveness’?

I have created 3 columns(span4). The site shows OK on regular screens (approx 1200px), but on high resolution/wider screens – even though the image ‘after the header’ remains steady, ‘body’ expands to fill the full width of the media (screen) – It looks awkward as the distance between the column content spreads far apart.

I would like to:

1). Restrict the max width by something like this:

html/body {
max-width: 1200px;
margin: 0 auto;
}

[My take is that Customizr max width is around 1170 px, and, With the negative left/right margins, I have stretched it to close to 1200px]

2). there are 3 areas in the ‘header’, Title/brand, navbar (I have created a widget are there), and tag area.

The social share icon bar in the navbar area doesn’t remain centered with respect to the header.

The best way, I think, will be to assign equal width to the 3 areas (title/brand, navbar, and tag line) and then apply the css to position the elements within.

Any ideas/ help is greatly appreciated.

The site is: https://newsscouter.com/

[I am also posting this request on the forum as a new query – in case forum rules demand it.]

Thank you.

Hi Parwaiz Khan,
for 1. try:

html, header {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

Thanks Martonno,

Problem is not with header, it is the body that keeps on expanding to fill the entire media width. So, why include the ‘header’?

I will be testing different ways and see how it effects the ‘responsiveness’ of the theme.

I will report back after success.

Still cannot figure out # (2) issue.

Thank you.