Does anyone know how to fix this?
Here look at around 1270px wide browser:
https://wordpress.org/themes/twentyfifteen/
By the way, it's not because of that side bar. It happens on a site I'm working on too:
http://vickyspaintings.com/
Check at around 1060px wide.
Screenshot:
Related
My nav menu items (li's) are changing size on different pages and I can't figure out why. Nothing is different with the dom prior to the main content, however, from the home page to the contact page, the size of the entire menu increases by about almost 7 pixels, from 655px to 672px. I tried both Chrome and MS Edge and it happens in both browsers. I am using em for the menu font size but in the inspector it computes as 16px for both pages so its not that. The menu is actually brought into the page using server side includes so the html itself and the associated css is identical in both pages.
It's not really a big deal, but I do want to figure out why it's happening. I would put the relevant code here but have no idea which code is causing it. Its a basic html/css website (although the contact page is php, could that have something to do with it?).
https://avayoupaint.com
I shouldn't be doing this, as you shouldn't be sharing a link to a production site, but instead share code of your menu and relevant styles.
If you are on a Mac like me, and inspect your menu, you'll see the letter o for "Home" is different. Inspect with DevTools, and you'll see one is serving Open Sans, the other page serving Helvetica.
Somewhere in your code, you are not loading the fonts consistently (probably a file path issue). One font has slightly different letter shapes than the other, explaining that 7px difference.
EDIT: DevTools might be showing this for you:
Blocked loading mixed active content “http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800”
Make sure to load the Google Font using the https protocol to avoid this issue.
Ok, So I have customized a Twenty Fourteen theme from WordPress. Everything works find minus a couple things. The top header shows a white background if its stretched. The footer also shows a white background if its stretched. The funny thing is there is no white background in the css code? I have even looked in the functions.php to see if it was hard coded issue and nothing. I tried to inspect the element and all it says it shows up before and after? I tried adding background: none; to all the before and after codes and still shows up. Does anyone have a clue I have linked the site I am developing on.
Website: http://www.soslidesigns.com/flh
If worst comes to worst I can simply re-design it and I have a feeling I might have to. Would be nice to get your guys feedback. Like I said I have tried everything I could think of simple issues like this always through me in a loop.
Thanks in advanced.
Your white background write here in body (background:none). This set white background to all site. If you need set another color to header - change background in .site (in this file)
I sort of feel like a moron for asking this but I've been stumped on this question for about 2 days. On a website I'm trying to put together, http://gravenimage.us/awf/ , the sidebar, which I want to be on the right in the main content area, is showing up at that bottom. I've tried adjusting the max-width, css align, css display, and a bunch of other things. I've gotten the sidebar to move around a little bit but that's it. I'm pretty sure the issue is that the main content is fixed to a certain width, and it's supposed to be flexible for when the sidebar is called, but that's just not happening. Any ideas? I'd really appreciate some assistance.
http://www.gravenimage.us/awf/screenshot.png
Check your page / post copy... make sure to view HTML mode and not the visual mode,
check for any rouge opening or closing div tags that may be there,
when you copy paste content into the visual editor, most of the time any html content will be pasted in there also..
or check the theme /page.php file, looks like the sidebar is being pulled in the content div, messing up the rest of the layout!
check for any instance of...
<?php the_content();?>
<?php get_sidebar();?>
good luck..
I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!
My website at http://www.oblivionro.net isn't properly vertically-aligned when you click on a different link in the menu.
For example, if you go from the home page to the ventrilo page, you'll notice that the alignment of the website shifts to the right and down a bit. I know a fair bit about php, but I'm not that great when it comes to css and designing websites.
Anyone know what the problem might be? Thanks in advance.
Your link doesn't work for me, but I can guess what the problem is. To fix it, add:
html {
overflow-y: scroll
}
That will force the vertical scrollbar to always be visible, so there will no longer be a "shift" when you move between pages that do/do not have a vertical scrollbar.