CMS Development

jerickson
Miembro

Blog post banner not responsive

resolver

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 Me gusta
2 Soluciones aceptadas
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog post banner not responsive

resolver

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

Ver la solución en mensaje original publicado

Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog post banner not responsive

resolver

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

Ver la solución en mensaje original publicado

0 Me gusta
4 Respuestas 4
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog post banner not responsive

resolver

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
Miembro

Blog post banner not responsive

resolver

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 Me gusta
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog post banner not responsive

resolver

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 Me gusta
jerickson
Miembro

Blog post banner not responsive

resolver

Thank you soo so much!

0 Me gusta