Header Text Optimization

davidshkim.com

I recently changed my header text and would like to make it responsive to screen sizes (mobile, tablet) while keeping the form and structure of maintitle and subtitle in proportion. Also, I would appreciate the same responsive CSS code for my about page and brief introduction on front page. Thanks for the help as always!

Hi,

You can change the font-size of the banner text to make it fit better on smartphones and tablets with this Custom CSS:

@media only screen and (max-width: 600px) {
.text-slider .maintitle {
    font-size: 30px !important;
}

.text-slider .subtitle {
    font-size: 12px !important;
}
}

@media only screen and (max-width: 400px) {
.text-slider .subtitle {
    font-size: 9px !important;
}
}

The same CSS is not related in any way with your about page and brief description, can you please let me know what you want to modify on them?

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Thanks Csaba, the code’s working well. As for my about page, if you log in with mobile, my header image and profile image is in disarray, and I would like to make it appear just the way as it would on desktop. As for introduction, it’d be nice if there’s less paddings on the sides of text so that it doesn’t appear as stretched vertically on mobile screen. Thanks again.

Hi,

You can use this Custom CSS to reduce the padding on Brief Introduction widget on mobile:

@media only screen and (max-width: 768px) {
#panel-466-0-0-0 > .panel-widget-style {
    padding: 45px 0 45px 0px !important;
}
}

The issue with the about me page is that you have set fixed position for the image using the aboutmephoto and aboutme custom classes on span elements, remove them, so your site will look better or at least don’t position the image to absolute, because that will look that bad on mobile, or as an alternative you can use this Custom CSS to do a little bit of fix on mobile:

@media only screen and (max-width: 980px) {
.aboutmephoto {
    left: 0 !important;
    width: 100% !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

The CSS code for About Page seems to be not working. The image still appears cut off from the rightmost margin on mobile screen. Thanks.

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Best Regards,
Csaba