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.
Related
I'm using Bootstrap 4 and trying to set 3 columns on the page to have 100% height - to only have scrollbars on the columns and NOT on the page. I have tried h-100 on the row div as well as various custom css changes like setting the height and max-height to 100% on each of the columns and other solutions I found on Stack Overflow and other sites. No matter what I do, I just cannot get it working right. Would be grateful if somebody could help me out. Here is the site:
https://gordon-matt.github.io/Extenso/
To see what I am trying to do, go here:
https://gordon-matt.github.io/Extenso/#assembly/bde7b8d9-116a-4e39-939f-2acce6aba664
then click the first button on the left (the one that says "18 Classes"). You will see the middle column is a list group and will fill with items. The scrollbars will appear, but they extend longer than the page itself and now there's a scrollbar on the browser.. Instead, I don't want any scrollbars on the browser and ONLY a scrollbar on the columns. What can I do to fix this?
Use CSS Property
style="height:100vh"
You should use height: 100vh; style for your section that you want to be 100% height for every device.
I would suggest to not to use !important too often, it makes specificity unpredictable,
Here is my solution, just check following CSS IDs and classes:
#types {
overflow-y: auto !important;
height: 58vh;
}
.h-100 {
height: 73vh !important;
}
Please let me know if it works!!!
I have a bootstrap container with a bunch of form data in it. I think the width of the container is 970px regardless of how wide my window is. But when I size my window down to a much smaller size the form data inside gets pushed around and moved. Is there a way to keep the containers data all set a fixed width so the elements inside don't shift around when I resize the window?
I tried settign the min-width but that didn't do anything.
.container {
min-width: 970px !important;
border: 1px solid black;
}
If you're using columns inside the container, don't forget they have a percentage width, so you'll need to fix width those elements.
I can't be for sure without seeing your code, so perhaps post a JSFiddle and I'll edit this with a proper answer.
Why are you using fix min-width? It is the reason form data moved. Try to use col-md-4 or col-xs-5 etc classes or percentage width.
I'm not sure what are you trying to achieve as it seems like you are going against the responsive framework, which makes me wonder why you use bootstrap at the first place?
Besides, I think this meta tag post will help you achieve such a thing by using meta tag
<meta name="viewport" content="width=970">
and you should change .container to .container-fluid.
All information needed is here: http://getbootstrap.com/getting-started/#disable-responsive
And here's an example of how it works: http://getbootstrap.com/examples/non-responsive/
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
I'm fighting with the unusual grid and I added some hover effects to boxes and when I'm resizing window it behaves so weird. I mean the final structure is good but why those boxes jumping in that way? I'm not uploading the code here because there are many things from other subpages and still much unnecessary code. Any suggestions how to fix it? Thanks!
Demo here
Wrap the contents of your<body>in a single <div>.
Set that div's width property like so:
.wrapper
{
width:1000px;
min-width: 400px;
margin: 0 auto;
}
The above values are given only as examples. Adjust the numbers to your liking.
I have coded this just in html and works perfect,
http://akaleez.co.uk/Templates/3/
I then try to make it a wordpress theme and now my footer will not go full across the screen
http://lisas-nails.co.uk/?theme=twentytwelve1
only the bottom black part does.
I believe the root of the problem you're facing is actually a matter of certain elements expanding the page scroll horizontally to be wider than the visible content. First, to identify the offending elements:
One of them is #sidebar. I'm not actually sure where this came from in your WordPress variant, because it's not present in the original HTML you coded. Anyways, the problem is that this element contains a <ul> which is styled to be 600px wide, resulting in the additional horizontal scroll. If you have no need for this element, just delete it, because it doesn't look like you're using it for anything. Or, just remove the width:600px on the <ul> element, because that's the root of the problem.
The other problem element is the .left element, which adds together its width:100% and padding-left:190px to extend 190px off the viewport. I can't say for sure why this behaviour doesn't occur in your original HTML/CSS - it's possible that there's CSS other than what you originally wrote at play here, since the two pages aren't identical.
To fix this, you can instead rely on the default behaviour of a <div>, which extends to cover the entire width of its parent, rather than using width:100%:
.left {
background-color: #000000;
color: #FFFFFF;
height: 30px;
padding-left: 190px;
padding-top: 10px;
text-align: left;
width: auto;
}
(Above, I essentially just removed the float and changed width to auto.)
The reason why most your footer isn't expanding into the additional space on the right is because it takes a width of 100% - that is, 100% of its parent, which in this case is only as wide as the viewport. But this isn't a new problem, if you make your screen smaller in the original page, you'll see that the footer similarly will not extend into space off of the viewport.
Anyways, I hope this is what you were looking for! If it isn't, or you find parts unclear, let me know and I'll be happy to help further. Good luck!