Blog post banner not responsive

SOLVE
Highlighted
New Contributor

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!Capture.JPG

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Advisor

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








check Did my post help answer your query? Help the Community by marking it as a solution
Advisor

Hi @jerickson 

 

try to add 

position:relative;
top:25%;

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

 

best

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
4 Replies 4
Advisor

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








check Did my post help answer your query? Help the Community by marking it as a solution
New Contributor

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.Capture.JPG

Reply
0 Upvotes
Advisor

Hi @jerickson 

 

try to add 

position:relative;
top:25%;

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

 

best

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

Thank you soo so much!

Reply
0 Upvotes