Jump to content

Custom Header Troubleshooting

Recommended Posts

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

mobile example.JPG

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.