Custom Header Troubleshooting

Site URL: http://www.cjvdesign.com

Hey all,

So I have been finalizing my real estate and design webpage and have been refreshing my memory with CSS from my tumblr days 😆. I ended up figuring out how to add a title and a logo (for branding reasons) to my header, instead of one or the other. Got that all figured out and looks great on desktop and laptop. However, on mobile, my header title (my name) and my front page image wrapper are way too close to each other. The title is now overlapping the front page image as well as content on other pages on mobile only.

I played around with padding the header area however this encroaches on my beautiful wrapper image and crops it in a way I do not find visually appealing. Seems like I need a mobile only CSS that addresses the title formatting, but please let me know what you think. I tried using mobile only css codes (@mobile with screen size specs) and they did not affect anything.

Site URL is linked to post, password is 'Designer'. Please let me know what custom CSS might work to address the header padding without disrupting the image size.

Attached you can find an example of the issue I am speaking of.

If you need any other info please let me know. Thank you!

Best,

Christian

You can hide title on mobile by adding this to Design > Custom CSS

/* hide mobile title */
@media screen and (max-width:767px) {
.header-title-logo a:after {
	display: none;
}
}

On 3/6/2021 at 11:09 PM, tuanphan said:

You can hide title on mobile by adding this to Design > Custom CSS

/* hide mobile title */
@media screen and (max-width:767px) {
.header-title-logo a:after {
	display: none;
}
}

 

Thank you! That worked immediately.

Is there a way to resize title on mobile? Without the title on the phone it is hard to sus out what the website is about at first glance.

Thanks again.

On 3/9/2021 at 2:32 AM, Christianxjohn said:

Thank you! That worked immediately.

Is there a way to resize title on mobile? Without the title on the phone it is hard to sus out what the website is about at first glance.

Thanks again.

Hi. Use new code

/* hide mobile title */
@media screen and (max-width:767px) {
.header-title-logo a:after {
	font-size: 12px !important;
}
}