Working on site for a school project running into silly issues.
http://jmtestserver.net46.net/
1) So first thing I'm wondering, my height on the div with the textured background is set at a manual PX. I want this to be set at auto because I'm making this responsive so I want it to grow and shrink with the box divs. However, if I set it to auto it looks like this
http://i.imgur.com/AWFmiOM.png
I don't understand why the box divs arent pushing it down??
2) As you can see the 2 boxes on the right stick down further than the 2 boxes on the left. I don't understand why this is because the boxes use the exact same css other than color and the image sizes are are exactly the same. So I cant figure out for the life of me why they wont match up heightwise.
Thank you in advance! I know these are simple things but they are causing me a lot of trouble!
1) The problem with your footer "floating" up behind your boxes has to do with the "float: left;" on your boxes. The elements after your boxes will basically ignore the boxes as if they werent there. To fix this simply add clear: both; to a element after the float happens.
You can read more about it here: Float
#bottom-section {
clear: both;
}
2) The boxes being bigger has to do with your images not being the same size, either find/make images with the same height or add a height value to .photo_icon
.photo_icon {
height: 50px;
}
If you inspect your webpage you will see that the images are not all the same size. You can force them to be by changing your main.css. Modify .photo_icon as below:
.photo_icon {
width: 50%;
margin-top: 1%;
height: 99px; /* This line */
}
question: icons in 3rd and 4th box are bigger (height 98px vs. 55px in first two cases).
question: boxes has content of different height and take exactly the same height as its content. As I said, content in 3rd and 4th box is higher than in first two boxes.
Solution:
resize/crop your icons to the same size (height). If you add .photo_icon {height: 55px;} you'll see it will work correctly with icons with proper size.
Heights of your images are not same. If you make them same size, or add something like
height: 101px;
to your .photo_icon class, it would solve the problem
Related
Bear with me here, this is kind of hard to explain properly...
THIS FIRST PART AS DESCRIBED BELOW IS WORKING FINE.
On this first image you see a browser screen that is wider than my (bootstrap) container. The blue is the whole screen window, the white is the container (with a max-width) with the basic 12 columns from bootstrap.
I want the laptop on the right to be wider then the x-number of columns it has on its bootstrap grid. When the (for example) 7 colums have a width of (for example) 500px and the image is 800px wide, it will naturally overflow the container (if the image is not given a width, ofcourse). So when you make your window smaller (see second image) you just cut of the image a little.
THIS SECOND PART AS DESCRIBED BELOW IS THE PROBLEM...
Now I want to have the same thing on the left side... But When I have 7 colums in my bootstrap, that are (for example) 500px wide, and I have an image inside that, with a width of 800px the overflow happens naturally on the right side again. I would like this to be on the left side!! So something like having a div with an image inside the is aligned to the right, but the overflow is on the left.
THIS IS WHAT IS HAPPENING RIGHT NOW: where the overflow is on the right (when it should be on the left).
I do NOT want to strech this image longer than the natural width of the image
I PREFER it being <img>-tags in stead of background-image, but if this is not possible I can accept that.
Some Code is provided in this JSFiddle
Use
.imgLeft{
direction: rtl;
}
OR
.imgLeft{
position: relative;
}
.imgLeft > img{
position: absolute;
right: 0;
}
Giving max-width to image will works
.imgRight, .imgLeft img{
max-width:100%;
}
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
I'm having a great deal of trouble in getting all items inside a specific Div to resize within that Div, depending on the Div's width (Which is currently width:100%).
I've tried using the display:inline-block but that doesn't seem to work. There has to be something that will work? Basically I have a Div Wrapper that is width:100% and then a Div Container inside that which is a specific width.
The background of a Div inside all of those, has a background image, which I need to automatically resize according to the width. The site resizes down so it is Mobile friendly, which is where I'm getting the issue with the background image being huge still.
The link to the page in question, is here - Link to Page
The below code, is the bunch of Divs mentioned above:
#content-home {
float: left;
min-width: 100%;
padding: 40px 0px;
}
.home_container {
margin: 0 auto;
width: 320px;
}
Hope you guys can help out at all! Just as a warning, it's a WordPress site too but this is specifically a CSS issue. I'm not too sure if there is a Javascript or jQuery function, able to handle this idea?
Thanks!
Mark
It seems like the problem is that you're mixing % and px units for calculating the widths. Try using only % for both widths.
If that isn't the problem, then try using just "width" instead of "min-width". It seems like the "min-width" property might be the issue.