Add one more section to widget area

Hi!

I need to add 4 images like in this picture

I’m using text widgets then adding the img src, identifying sections (1,2,and 3 by now) and using the standard width 1/3 for all of them. Thie thing is I need to add one more widget here. I noticed all these sections are 33%width…how can I add a new section?

Ok, I already to manage to add another section…The thing now is that sections aren’t aligned side by side…

I could use some help with CSS in this case please…

Hello MDS,

Can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Thank you Roman. I’m waiting my webmaster to publish the website so It can be available. Tomorrow it will be already possible and I’ll get back to you.

Thank you very much.

Okay MDS,

Please let me know when it’s live.

Kind Regards, Roman.

Hi Roman!

Finally I have the website published.

Password: lE7yX1bDQwws

Hope you can give me a help!!!

Thank you very much!

Hello MDS,

Please go to your Customizer from the front page, go to front page widgets section, expand that four widgets, expand their Styling sections, and set more specific IDs. Someting like first-fact, second-fact, third-fact, fourth-fact, instead of 1, 2, 3, 4.

Then you should be able to apply these CSS rules to put those widgets side-by-side (media rules might be added as well for responsiveness):

display: inline-block;
width: 25%;

But first, please let me know when you change IDs.

Kind Regards, Roman.

OK, ID’s changed! and also added css to each one of them and they are inline now. Mobile version in fact isn’t adaptating. I’d like them to align vertically and images to expand?

Okay MDS,

Please try this instead:

#first-fact,
#second-fact,
#third-fact,
#fourth-fact {
    display: inline-block;
    width: 25%;
}

@media only screen and (max-width: 991px) {
    #first-fact,
    #second-fact,
    #third-fact,
    #fourth-fact {
        width: 50%;
    }
}

@media only screen and (max-width: 500px) {
    #first-fact,
    #second-fact,
    #third-fact,
    #fourth-fact {
        width: 100%;
    }
}

You can adjust the values and breakpoints to meet your needs :slight_smile:

Kind Regards, Roman.

I did this and a few more things :stuck_out_tongue:

  • As I want images to be centered not expanded through entire page width (for example, aligned left to footer logo and right by the third footer contact block) they couldn’t be 25% width… I defined 19% and made the adaptation to the media devices;
  • Then, in desktop version, I want them to have 100px margin top and bottom but much less in mobile d’s

So i came across this but I don’t think it’s working.

#first-fact, 
#second-fact, 
#third-fact, 
#fourth-fact { 
    display: inline-block; 
    width: 19%; 
} 
 
@media only screen and (max-width: 991px) { 
    #first-fact, 
    #second-fact, 
    #third-fact, 
    #fourth-fact { 
        width: 40%; 
        padding-bottom: 70px;
        padding-top: 70px;
    } 
} 
 
@media only screen and (max-width: 500px) { 
    #first-fact, 
    #second-fact, 
    #third-fact, 
    #fourth-fact { 
        width: 80%; 
        padding-bottom: 40px;
        padding-top: 40px;
}

In fact seems in mobile padding between them is huge… :confused:

Hello MDS,

Looks like this requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Ok. Could you just help me with that question to center the 4 images the more similar to this?

I’ve tried to add margin, padding, etc…but maybe I’m appling them incorrectly…

Those widgets don’t have a container, so I don’t think that there is an easy way to do this.

That’s why I provided code to make them full width.

Kind Regards, Roman.

I see.

Ok thank you.

You are welcome MDS,

Kind Regards, Roman.