Image Issues on Home Page

Hi all. I was recently hired on as a marketing and biz dev specialist for my company and I'm tasked with improving the website. We paid for a website building service through Squarespace and it has significant amounts of CSS and HTML code which I believe is causing some issues, but its outside of my realm of expertise. 

Main things I would like assistance with is this custom-built carousel/ image slideshow. For some reason the images are always different sizes regardless of the section height or content alignment which looks poor when the image switches. Also, the arrows are too high up on the image and I would prefer for them to be centered in the middle. We currently have a duplicated website on a light color scheme and these issues have been compounded and actually appear worse, but we are on a free trial for that domain so I cannot share a link.

https://www.4mek.com/

Hey @MEKEnt The arrows are actually centered on the image. But the reason they appear to not be centered is because the image goes all the way to the top of the page behind the navigation bar at the top. You can add some CSS to push the top image down so that it starts under the navigation bar... then the arrows will look correct.

@JessicaM If you have the time, would you be willing to provide some assistance with where to start the CSS for that? I can make some small changes but writing it from scratch has proved difficult. 

5 minutes ago, MEKEnt said:

@JessicaM If you have the time, would you be willing to provide some assistance with where to start the CSS for that? I can make some small changes but writing it from scratch has proved difficult. 

Here's some code... adjust the margin-top number to whatever you need.

It will also help to resize the images so that they're all the same height. If you don't have them, you can download them from your current site, resize, then reupload onto your site.

//push top image down on home page//
@media only screen and (min-width:767px) {
body.homepage #page section:first-child {
    margin-top: 90px;
}
}

Thanks! @JessicaM  Yet to change the size of the images but will do that shortly to see if I can get everything uniform. Instead of making an entirely new post, I was curious if you would be able to help with these changes.

We have a phone number link on our header that I would like to move above our "Request a Service" box, yet this is only possible with CSS / code injection and I'm struggling to find results. 

www.4mek.com is the original site that is currently still live, just doesn't have the phone number as of yet. Attached is an image of what it currently looks like and what my goal is. 

Hey @MEKEnt -

I'm not sure of the code that will move it... but maybe someone else can reply here with the code.

7 hours ago, JessicaM said:

Here's some code... adjust the margin-top number to whatever you need.

It will also help to resize the images so that they're all the same height. If you don't have them, you can download them from your current site, resize, then reupload onto your site.

//push top image down on home page//
@media only screen and (min-width:767px) {
body.homepage #page section:first-child {
    margin-top: 90px;
}
}

Unfortunately, after resizing all the images and inputting this code I'm still running into issues in terms of non-uniform sizing. 

With the image for reference below, I can see that there are issues with the first image box.