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
Related
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
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…
Yes I know no one likes iframes, but here's the scenario.
I have a client who has his website that he's never going to change.
He has page that has an iframe with a 680px width and 600px height.
He currently has a website embedded in it that has a width of 950px.
What I want to know is if there is a way (I've searched all over) to automatically set the website to fit into the iframe box?
I have access to the child site but not to the parent, but my client actually knows some html/css so I can build a test link on my server and send him the code (if he needs it) to be applied on his end.
Thanks in advance.
This isn't an "automatic" way, but one thing you could do is apply some CSS to the little page. If the page you are loading doesn't change, you can apply CSS that is specific to that page which will change the elements' widths, and anything else that needs to be changed. Here is an answer on SO that describes just how to do that for iframes.
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)