Hi @mobilequeen!
A couple of notes on the code that @phpexpert21 has provided.
First – try to avoid using !important in CSS whenever possible – it’s usually not needed (like here) and it can make it more difficult to troubleshoot your CSS down the road, since !important acts as an override. Generally it’s best to write more specific CSS if you need to, rather than rely on !important to force the code to work.
Second – that code will make the image smaller to get the widgets to a more similar height – if you want to go that route, leave off the height value entirely. The theme has CSS in place to calculate the height automatically based on the width, which will look better than a manual height setting.
From your post, it sounds like you’d like to decrease the space between the title (Our Location) and the address below it. Then make sure the two widgets are the same height.
If I have that right, I’d recommend the following:
#text-2 .widget-title {
margin-bottom: 0;
}
@media screen and ( min-width: 768px) {
#text-2, #text-5 {
min-height: 356px;
}
}
With the first style, we’re removing the margin from the bottom of the widget title to cut down on that space.
With the second style, I looked at the height of the larger widget (on some screen sizes it’s taller than others, when the address runs to a second line) and I’ve set both widgets to be at least that tall – so they can grow it the need to, but based on current sizes they’ll always match up ??
