CMS Development

jerickson
Member

Blog post banner not responsive

SOLVE

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

0 Upvotes
2 Accepted solutions
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog post banner not responsive

SOLVE

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

Anton Bujanowski Signature

View solution in original post

Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog post banner not responsive

SOLVE

Hi @jerickson 

 

try to add 

position:relative;
top:25%;

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

 

best

Anton

Anton Bujanowski Signature

View solution in original post

0 Upvotes
4 Replies 4
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog post banner not responsive

SOLVE

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

Anton Bujanowski Signature
jerickson
Member

Blog post banner not responsive

SOLVE

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

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog post banner not responsive

SOLVE

Hi @jerickson 

 

try to add 

position:relative;
top:25%;

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

 

best

Anton

Anton Bujanowski Signature
0 Upvotes
jerickson
Member

Blog post banner not responsive

SOLVE

Thank you soo so much!

0 Upvotes