Header image won’t scale
-
My header image will not scale to mobile view. I am using the typit free theme.
thanks!
The page I need help with: [log in to see the link]
-
done
I see your code now, but not all of it is there. You may want to copy the code above and make sure you get everything there and then paste it again.
Also, I’m trying to figure out why your title and the excerpt caption text is not showing. On mine it is.
I may need to upload screenshots of the settings I’ve got so you can see if yours matches.
This is what I see on my local test site with what I did:
I re did the code, it is all there now. Still no words. These might not be the right technical terms but- could there be something in the big code of my page (under the editor portion in the dashboard) that is off or blocking it?
Really hard for me to see what is happening because I cannot log into your site, but I made a screenshot of settings to double check your site.
Hoping we can get this working for you because why it’s not showing is puzzling.
So weird. all my settings are the same as you provided. I’m not sure what is going on but I do appreciate the time you’ve spent to try and figure it out.
I really want to help you on this one as it’s very puzzling, plus it looks like a nice site with this theme.
If you are adventurous, I can take you through some troubleshooting steps. The only thing is that I know your site is live, so if anyone drops by your site, they will see some odd things happening.
When I look at your front page source code, I do see the empty
<h1>
and<p>
tags where the page title and excerpt should be, but the text part is not.The first test might be a bit scary for some people but usually, when something is not working 100% and looks wonky in the site, it can sometimes be a plugin that is causing a conflict. So the common thing to do is to disable each plugin 1-at-a-time. Basically, you will disable 1 plugin, then look at the front of your website. If it doesn’t get fixed, then disable another plugin, refresh the site and look…keep doing that until you’ve gone through each plugin.
The idea with that method is to determine if it is a plugin and which one.
Second Test – Change the Front Page settings to the different styles and see which one shows the title and make note of the setting.
Third Test – Change your front page to a different page that currently shows the title and see if the title remains when it’s the front page.
One Correction to my code I gave you. Look for this:
.home #header-caption p { font-size: 1.5rem; margin: 0 auto; line-height: 1.2; text-shadow: 3px 2px 8px rgba }
and make it this:
.home #header-caption p { font-size: 1.5rem; margin: 0 auto; line-height: 1.2; text-shadow: 3px 2px 8px rgba(0,0,0,0.3); }
It looks like I left the last line incomplete. But that won’t be the issue with the missing title and excerpt.
no go on the code addition.
Could it be because I have a static homepage?
Where should the wording be coming from that I want to appear over my graphic?
The wording should be the page title and the excerpt below the title is the excerpt you enter in the “Excerpt” box when you have that page open in the editor.
Did you try doing the plugin option and the other steps such as changing your front page to be a different page that already shows a title?
not sure exactly how, but it is all appearing now… so i’m going to just go with it! I messed with the excerpt, page title, deleted some stuff and started over with some plug ins.Thank you so much for all of your help!
I do have a question though, with the code you provided me that included fonts etc… can you point me in the right direction for changing the font and which part of the code that would be? I want to play with the size of the yellow letters and do a more-cursive style font
That is great news! I can see the page too.
To change the font, you would go to Google Fonts and find the font you want, in the upper right you can search for a font or just click on any of the font sets to view it. For example, if you are viewing the Allura font, to add this to your choices, click the “Select this Font” and in the bottom is a small popup window. In that is the Embed tab…. click on next tab below it
@import
(not the Standard) tab. Copy the@import
line only and past that in your theme customizer to replace the existing line there that has the@import
.To change the style attributes of the font with the code I gave you, this is the set of code where you would do it:
.home #header-caption h1 { font-family: Allura,"Times new roman",Georgia; font-weight:400; font-size: 4rem; line-height: 0.75; color: #ffde59; margin-bottom: 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.55); }
From that, you can edit (or add or remove) the styling attributes, such as font size, line height, color, and even adjust the text-shadow my changing the 0.55 part to what you want. This can go from 0 to 1.0 only.
You can also do font style
More about Font styling HERE
Thanks! Image isn’t scaling perfectly on mobile view but it is a lot better with the wording change so i’ll live with it!
thanks again for all your help.
- The topic ‘Header image won’t scale’ is closed to new replies.