On this template I've built using Foundation, everything looks correct and responsive except for both navigation bars. They're both on their own <div class="row">, yet they overlap eachother on window resize.
(There is a #media only screen and (max-width: 767px) that is supposed to make it look even cleaner, if it helps at all).
Actually if you open the page on chrome with the developer tools or in firefox with firebug, you can see that when you make the page smaller than 767px width, is when the problems enters, due your #media only screen and (max-width: 767px). i would recommend to check that css cause if you removed it from the html you get a better result, so you may check what attributes inside that css are making your div crazy.
try adding foundation.css (around line 148) .row class height to 140px and moving main-links somewhere inside top of the main-content? That code seriously need either playing around with heights/margin or div blocks imo :)
Edit: roughly editing foundation.css lines is not what you need, make separate css class for that specific height setting and trigger usage of it with correct media query (width which causes problem to occur). That way you can tune any classes you like around the top navigation, its not pretty but it gets things work.
As Jorge Aguilar said, the problem lied in a float: none that was applied to every <li>. Furthermore, I used a width: 100% property to stretch the elements across the entire screen (like it originally was with the floats, but without the overlapping)
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I am first year student Software Engineering and I use to have an assignment to make a web page. It is not complicated at all but after writing the web page I realised that when you open the site in smaller resolution (than mine 1080p) device it doesn't fit very well. I don't know what resolution uses the teacher who is going to assess me so i want to modify the site for 1600;900 and 1336:768 at least.
I should say that I used other suggestions that I should divide div tags by % not by pixels but it still doesnt work.
I googled the problem and I think I found a solution - actualy it is something with #media where you can set different percentages for different screen resolutions in advance and then you get the cliend screen resolution and open it in appropriate proportions
So I wanted to ask you how exactly to write this?
P.s you could take a look at my webpage here
The answer really depends on how intricate your site is, what the layout looks like, and what elements need to do at what sizes.
In general, HTML is "fluid" by default, so text will wrap, and elements will resize to fit their contents, so if your design is simplistic, you shouldn't have to do anything.
When you start sizing things with absolute/static pixel sizes, you get yourself into situations where things no longer fit.
You should generally avoid making designs that are fixed pixel sizes, and allow for elements to re-size naturally as HTML is designed to do.
#media queries are appropriate for changing appearances at specific resolutions, and are generally set up to make "responsive" designs, where elements can change styling or be hidden/shown at different resolutions. This is usually used for more complicated or dynamic layouts, and still needs to be planned for accordingly, because it is usually set up to accommodate a range of resolutions. For example an element might be 100% wide from 0 to 1024 pixels wide, and become 50% wide when the window is over 1024 pixels wide.
In the case of your web site, you are sort of breaking it by floating everything left. float tends to be really over-used in CSS without understanding its side effects.
Remove width from your menu element, and remove width and float from your content element.
This will cause the menu to be as wide as its contents (the buttons) and "float" next to the contents, which will try to be 100% wide, but be narrowed to allow the menu to fit next to it.
Good luck in school you will need to read up on responsive design which you acheave via CSS.
eg.
#media screen and (min-width: 500px) {
// Write your style
}
#media screen and (min-width: 501px){
// Write your style
}
That is what you need to do, there is lot of documentation and tutorials on this you will have no problem finding the resources.
Here is a TutsPlus page to get you started: Tutorial link
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}