Mobile welcome box

#1

I just love Katori layout. I am wondering how to keep the welcome box on smaller displays. ie phone does not show welcome box. on site nameoutreach.org

#2

Hello there,

Just checking your site. To display the welcome box, you can try to use following css code:

@media only screen and (max-width: 499px)
.welcome {
    display: block;
}

put the code using simple custom css plugin or in your child theme

#3

Hi,
I have done the cSS change as mentioned but still didn’t get welcome screen on mobile . Can you please check.
Screen shot of my website are
https://drive.google.com/open?id=0Bx50kT4bx-fid3RuZ0FPc2RjeUk
https://drive.google.com/open?id=0Bx50kT4bx-fiZXpocGRBNldNU28

#4

Hi nagaraj,

Please try this Custom CSS and let Us know how it works:

@media only screen and (max-width: 499px) {
.welcome {
    display: block !important;
}
}

Best Regards,
Csaba

#5

Thank you
I was able to accomplish this and center text with

@media only screen and (max-width: 499px) {
.welcome {
display: block;
text-align: center;
}

.main-navigation {
	margin-top: 0;
	padding: 0;
}

}

Now it would be nice to figure a way to just show welcome box in mobile only.

#6

Great @idahoster,

Sorry, I missed the brackets from the code above
@media only screen and (max-width: 499px){
…
}

#7

Hi,

I didn’t welcome box photo after ur change also.I got welcome box text.
Can you look into it.

#8

Hi nagaraj,

Please use this Custom CSS, to show the image too:

@media only screen and (max-width: 767px) {
.wcm-photo {
    display: inline-block !important;
    max-width: 120px;
}
}

Please let Us know how it works.

Best Regards,
Csaba

#9

It works…Great.Thanks

#10

Hi nagaraj,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba