Blog post banner not responsive

[jerickson]

I am working on this page here (https://blog.wolfgreenfield.com/test1234/testing-1) and in the mobile version, I am having trouble getting the 2 modules on the banner image to align. Ideally, I'd like to push the Wolf Tracks logo down a touch and pull the "following all of the latest IP developments in life sciences" up a bit. I noticed that the box-sizing: border; is pushing the text down but I'm not sure how to change it in only the mobile version. If I play with the mobile padding (70px;  ) it helps but isn't perfect. 

Thank you so much in advance!

[Anton · Accepted solution]

Hi @jerickson, 

it's quite easy.

Your logo image has a very big white space above and below the image. That's the reason why you can't get the 'headline' much higher with padding. 

I would recomend to crop the unneeded spacing in Photoshop (or similar), reupload the image and then add those 3 lines instead of padding to the class

@media (max-width: 600px){
.blox_hero-phone-tablet .blox_cell-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
}

regards, 

Anton

[jerickson]

Thanks @Anton this really looks great! I didn't realize it had to do with the image size.

Is there anyway to move the logo down?

Thank you for all of the help! I wouldn't have figured that out.

[Anton · Accepted solution]

Hi @jerickson 

try to add 

position:relative;
top:25%;

to the logo class. You can manipulate the 25% to your needs

best

Anton

[jerickson]

Thank you soo so much!