Hi, I’m using the Tesseract them and have run across a few problems I’m trying to resolve. My temp website can be found at evelyngrundy.com/Montessori-test
1. I’m having a hard time with the background image. Most of the images I’ve tried are too large and seem to cut out the focal point of the image when viewed on my laptop. When I do find a picture that seems to work on my laptop, it then resizes (zooms way in) to an odd location of the photo when viewed on my phone. Is there a way to indicate the focal point so the image stays roughly the same on each device?
2. I increased the header to accommodate a larger logo and now the navigation bar (the actual clickable links) appear on the mobile version in addition to the drop down menu on the side. How do I remove the navigation below my logo on the mobile version?
Thanks for your help!
Hi Elgrundy
Thanks for reaching out.
1. You can edit the row in question and click Design > Background Image Display. You’re Cover. That’s the best setting to use. There is one other option which is: Centred with original size. You can give that a try and see if it works out better for the image and this application.
2. When you increased the header, how did you go about that change?
Hi Andrew, thanks for your response. I had the photo set to cover originally and it was crop the photo in funny ways. When I set it to center with original size, it crops much better in the image although on one device it doesn't span the entire width of the screen (I can live with that as long as it spans the entire width on most screen resolutions.) The challenge I am having now is that it's still far too zoomed in on the mobile version plus the text is huge and cuts words in half. Is there a way to resize the text to fit mobile and not crop words?
As for question #2, I will respond to that later this evening as my husband was the one who made the changes.
Thanks so much!
Evelyn
Glad to hear you’ve made progress.
The image will sort itself out once you sort the text out. Because of the way these rows have been setup, doing the responsive work that Tyler didn’t do, is basically a custom development job. I’ve gone over a method twice. If you could, please try cover those threads, I’d really appreciate it :)
Thread: Tesseract theme: How to make row background images more responsive
Thanks,
I've been trying to work my way through those tutorials for a while (even before posting my own question) and I don't seem to be making any progress. :(
I am unable to find the easy google fonts styles to delete the margin-top:. I did delete the [spacer height="95px] at the bottom of the .home-healdine text. I then added the attribute to the first row as directed and added the custom CSS you mentioned.
Where can I find the easy google fonts styles to delete the margin-top: or, is there something else I'm missing?
Sorry for the mis-understanding. Thanks so much for your help! Evelyn Grundy
As for my 2nd issue re the navigation showing up on mobile: Here is the additional CSS code added to the Site Banner.CSS file for the Tesseract theme:
nav#site-navigation { display: block; margin-top: 30px;}
div#header-button-container { margin-top: 30px;}
These instructions were pulled from this support thread: https://wordpress.org/support/topic/theme-tesseract-increase-header-size-to-same-as-footer
I'm thinking something happened when adding this code that threw off the navigation? Evelyn Grundy
Sure :)
Settings > Google Fonts. Check that to locate your Easy Google Fonts CSS rules.
All WordPress themes completely overwrite when updating so it’s important to not edit any theme files via Appearance > Editor. Those changes aren’t update safe and will be lost if an update is shipped for the theme and you run it. Ideally, you should restore this file and then make changes via a Custom CSS plugin: https://wordpress.org/plugins/so-css/.
Here is what site-banner.css should be. Perhaps look at restoring the file:
https://raw.githubusercontent.com/Conutant/TESSERACT/Master_Branch/css/site-banner.css
We can then assist with the change you wanted to make there.
Thanks. When I go to my google fonts, I see three tabs at the top. 1st tab is "edit font controls" which gives me the option to select a font to edit or create a new font and then below that, the option to add CSS selector (ex .home-headline). There is a check box for "force style override" and that's it besides saving or deleting the font. No CSS. The next tab, "manage Font controls" just gives me a list of my fonts to edit which just brings me back to the first tab. The last tab is "advanced" where I would assume I would be able to find the actual CSS code/attributes for each font but it just asks me to enter my google fonts API Key (not sure what that is).
Am I missing something in terms of where to find the google fonts CSS code?
Can you take another look there. Sorry, I haven’t used this plugin before so I’m not certain. .home-sub is where the issue is arising:
.home-sub { color: #ffffff; font-family: 'Roboto'; font-size: 25px; font-style: normal; font-weight: 100; letter-spacing: 6px; line-height: 1.7; margin-bottom: 199px; }The margin-bottom: 199px declaration is the problem.
Hi Andrew – I have reverted the my site back to its original header and I have the custom CSS plugin installed. How do I now increase the banner and logo size and center the navigation links in the new size header?
Also, I managed to get the responsive photo working! :) Thanks!
I also have a new question regarding my bullet list. I created a bullet list using the pagebuilder and visual editor. I originally tried adding it on the visual page, then deleted it and tried adding it in the text page using <ul> then <li> text </ul> etc. and </ul> Any ideas why the "list" is showing up darker without any bullets? (eg can be found here under the "what to bring" header. ) http://evelyngrundy.com/Montessori-test/index.php/parents/montessori-at-home/
Thanks so much for your continued help with my site troubleshooting! Evelyn Grundy
Hi :)
How do I now increase the banner and logo size and center the navigation links in the new size header?
I’m afraid I haven’t used the theme before. We’re here to help out with SiteOrigin specific questions, but, unfortunately, don’t quite have the resources to assist with general theme support if it’s not ours.
There are searchable discussions on these topics though.
Also, I managed to get the responsive photo working! :) Thanks!
Well done!
I also have a new question regarding my bullet list…
The theme is doing that. We need to add the following to Custom CSS:
.panel-grid-cell .widget ul { list-style: disc; }Hello,
I am also using Tesseract theme on my website:
http://superhousers.com/
Long time it was fine… but today when I wanted to continue editing my page I noticed that header and footer bars are no longer full width. I have checked all the detais. rows and etc. but nothing works. Full width are set everywhere.
How i can change it back to full width? there is somekind of code or something? I have no previous experience with it. Thank you!
Hi Arnas
Please, open a new thread here: Page: New Thread. Thanks.