I'm having trouble with my website here: (solved)
The problem is that when I make the window too small the content starts moving around. I'd like to make it so that it stays in one place even when the window is re-sized.
I'm using a wordpress them so something must be interfering with what I've already tried but I'm not sure.
I've tried making a wrapper around everything, and giving it a min-width, it still fails to work. I've also tried setting the position to fixed of this wrapper, the main content, and the sidebar, which also didn't work very well.
I'm kind of stumped as to what it could be. If anyone could help me out, that'd be great.
Thanks!
Its the media queries that are causing the problem. All of your site is trying to fit in one column if there isn't enough room for it side by side but the fixed sidebar is messing with it. Disable the media query or apply styles for the sidebar to become display: block; below the width set and it should be fine.
Starting on like 871 of the stylesheet there are media queries that change the style of the page based on the width of the browser window. You can either delete these or restyle them as you would like for tablets, phones, etc…
Related
I am trying to fix this top heading while keeping the scrollspy working but to fix it either I have to use position fixed and then it takes the width of the whole page or I tried using position sticky with top 0 but it doesn't work and as soon as I wrap it in 100vh it starts working but scrollspy stops working. any idea how to solve this issue? it's really important to make it responsive so cannot use any px value for width as well.
update - I have tried my best to replicate the problem in the sandbox link here. you can see the issue in different resolutions through inspect.
I'm having trouble making my header responsive. When I view the site from a full-sized browser window, or from a phone, it's fine. (I've got "#media only" queries set up for mobile.) But if I adjust my browser window to anything in between the two, the div on the left side of the header runs into the one on the right.
I have a feeling it's because I've inserted the logo into the website via the header.php file. If it wasn't there, I'm sure the header would be responsive.
How do you handle this? Is there some "#media only" query I can set up to address the in-between browser sizes?
You can view the test site in question here: http://kahamarketing.com/wyckoff/wordpress/
I'm having a similar problem with the three banners in the footer, which run into one another if I make my browser window any smaller. Similarly, I added these elements through the website's footer.php file.
Thanks in advance for your help.
in your case the height rule for a.logo makes it broken. take out the line with height: 60px
maybe after that you need to take out the margin-top rule for nav.navigation
for your footer problem it is a bit more complicated.
hard to explain without knowing how much you actually know about CSS
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.