I have a Genesis Child Theme that's behaving very strange. The layout looks correct, but there's a huge blank white space on the right side and a scroll bar at the bottom. I can't for the life of me figure out what is causing the white space. There isn't a single div sticking out into that white space when I inspect with developer tools, and I can't find anything in the css that would be causing that issue.
The basic structure of the site is
<body>
<site-container>
<header>
</header>
<site-inner>
</site-inner>
<footer>
</footer>
<site-container>
</body>
There are additional divs within the above structure, but there are tons of them and I'm not sure listing each one is valuable since the site itself will need to be inspected. I can't possibly list the entire code structure since it's a genesis based wordpress site.
Does anyone have a clue what might be causing the whitespace? I encountered this problem once before with a genesis child theme, but it turned out to be an image that wasn't resizing and it was easy to find the issue. This time I can't find it for the life of me.
Here's the site link again.
The problem is caused by some CSS on your search input, around line 1456. Remove the width: 100%:
#search-3 input {
width: 100%;
}
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
Any idea's why my nav is showing up under the header and not inside next to the logo?
I spent all day yesterday designing a page just like this. Same everything on design and pretty much the same on coding, except I used DW fixed pixel (or liquid, but i think fixed), but after seeing a course on Lynda.com I decided to redo it in DW's new fluid grid layout (which I love a lot more (never used before)).
I've tried several things (i.e logo image align left etc) to no avail.
Screenshot
Comment Entering inspect mode and resizing the header div shrinks the menu, so it know's it's in the header
P.S. Danko thanks for the screenshot assist. On allowing it to be posted.
Answered in comments. Credit goes to David Randall.
Added div's logo and menu to elements in header div per something I was going to try (floating left). While this brought them inline together it popped both out of header.
Dave suggested
overflow: hidden;
Worked perfect.
I have been working on a small project for myself to try and experiment with HTML5 and CSS3, to get the hang of it. I need help solving a weird - in my eyes - and unexpected CSS quirk.
I have put my work on CodePen.io to see: http://codepen.io/jbehrens94/pen/uKgvH
The thing is, I want all <section>'s to be 100% in height, so every section fills the exact 100% width and height of the browser's screen. The thing is, if you scroll down to the bottom, there is a lot of white and I can't find out why.
I have noticed margins not working well, so I worked around them, mostly by using paddings.
I tried changing display's, floats and so on, but I just can not seem to find what the problem is and why there is a lot of white on the bottom.
It should not be there, as there are no elements after the last section.
You have three <div />s with classes file, sites, and contact on your last page which start about halfway down but have a CSS declaration forcing them to be 100% height.