Hi,
You’ve modified the size and position of the site title. That is what is causing the problem. If you can change the css for the site-branding-text div and the site-title, you can fix the problem.
The 2017 theme is mobile friendly already
Hi @ @rashmiravi
Can you expand a little more on what you mean by mobile friendly?
@jcastaneda he provided a link to his site so we can see his issue.
This question is too vague you’re asking about a general concept (mobile-friendliness) instead of focusing on what the specific issue is. The only significant flaw I see in testing the main page was that the title disappears from view.
The theme is as other mentioned mobile-friendly, in fact highly optimized for mobile. If you want to add a specific mobile feature, you need to communicate exactly what that feature is.
As you do custom styling and change sizes, test the mobile view right away so you can avoid “breaking” mobile support.
Hello,
Thank you all for the response. Yes by mobile friendliness I mean: When someone visits my site on mobile, I want them to be able to see the site title “verve transit”.
Also header image is not fully appearing (on desktop you can a girl sitting on a rock in the header image but is not seen on mobile)
I have put a link to my site below:
http://www.vervetransit.com
In the style.css these styles are affecting those elements. The fixed position on the image, if you overwrite that it will scale. With the site title, the top/left properties are moving the text out of view.
It’s helpful to use Chrome Inspector (right-click on the element while viewing the page, choose Inspector). Then view the Styles, you can then edit or uncheck them and view the results. This helps you pick the changes needed.
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
position: fixed;
}
.site-title {
top: -400px; */
left: 220px; */
}
Thank you for the response.
I right clicked on title, clicked on “Inspect” and saw the style css, after that
1. should I uncheck all the boxes?
below are boxes that appear:
font-family: “Jockey One”, Helvetica, Arial, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 99px;
letter-spacing: 0.02em;
text-transform: none;
color: #EF0298;
2. Where do I save it after I make these changes?
This does not seem to be working, as if I remove CSS code site title shifts to the bottom of the page.
Instead please can you let me know how I can make the below change:
1. Make site title appear on menu bar
2. Shift menu bar above header image
First off good for you in learning how to open inspector, good first step in becoming a developer 🙂 Just realize that’s a testing tool only, you can’t save the changes, the purpose is to evaluate which rules are creating which results on the page. So what you do is experiment with the rules, identify which rules such as “position: fixed;” are causing a problem, and try different settings there. If you can get the page looking how you want through inspector, take note of what you did to create the changes.
As I said when I tested your page, the rules I had to change to get it working the way you described was the rules I posted earlier. Now you have to store those CSS changes in your style.css or in a child theme. You can at least temporarily, post them into style.css of the theme, but just understand that is not recommended as a permanent solution because later that theme if you update it, will be updated and your changes will be lost. That is why we use child themes to make changes… also some premium themes offer a place in the WP Admin where you can add custom CSS rules.
See https://codex.wordpress.org/Child_Themes about how to make a child theme. It’s not that complicated if your goal is just customizing CSS, you basically make a folder under themes, add style.css with a child theme definition, then put all custom CSS in that same file. Then you can safely update the parent theme, and anytime you want to make more customization you edit your child theme.
For now try putting those rules I shared before into the bottom of your style.css, then check the page and see how it looks.
Also don’t remove styles/rules from the base theme CSS, again those will be overwritten again later if you ever update that theme. And it won’t really help you get the results, because you’re likely to remove something that is needed somewhere else. The way CSS works is rules can be overwritten, even though the base stylesheet has:
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
position: fixed;
}
You can replace that rule later with:
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
position: relative;
}
