I am working on a website and i am having a programming issue with a floating div.
I am trying it to stay the same width no matter the resolution.
I made a fiddle with my code.
What did i do wrong?
Btw it is being used in a bootstrap theme I purchased.
Jsfiddle: https://jsfiddle.net/dvmad/960a15nm/2/
<div class="container rotatingimagetextpadding">
<div class="rotatingimagetextholder">
<img src="assets/images/genericassets/slider_img_1.png" alt="lincoln" />
<span class="rotatingimagetext" >Verbiage</span>
</div>
</div>
Take away the padding percentages and set absolute dimensions using px instead in your #media. The percentages is what is changing the size when you shrink the screen.
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I would like the right side of the column to be set to a fixed size of 400px wide while the left hand portion is 100% of the difference.
Current code:
<div class="container-fluid fill">
<div class="row">
<div id="leftpanel" class="col-md-8">
</div>
<div id="rightpanel" class="col-md-4">
</div>
</div>
How would I go about doing this with Bootstrap?
Not only with bootstrap but even with nay CSS trick it is something tough to set a column fixed width in Pixels and rest one is 100% of the rest portion of screen because each device have different resolution. Still if you want to achieve this than you should look at the calc() function of css. Though it is not supported by all modern browser but would be helpful to you.
I am using bootstrap, the container is 915px width, I am running in mobile browser.
The problem is the div with background color is supposed to occupy the whole width, but there are some white margins.
how can i extend the div a few pixel in each side?
<div class="container">
<div class="" style="width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
Have you tried using a different container class from Bootstrap?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
Reference:
http://getbootstrap.com/css/
Try adding a negative margin
margin-left: -15px;
margin-right: -15px;
From what you've posted, it looks like the inner div is 100% of the container.
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
You can try use .row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
I am trying to achieve the following in the image posted below. When I resize the browser I want the image and button to decrease in size but maintain the same ratio with the main background. I also want the text to not overlap the image so the font size should get smaller. How can I achieve this in css? Heres the image: http://i.imgur.com/2qR2y4E.png
This is the HTML code I believe should be correct. I've tried in the CSS absolute positioning of the image, i've tried floating each element and using percentages for widths. If it gets to a mobile width I would just display:none on the image but keep the button. Any help is appreciated.
<div class="content">
<div class="text>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</div>
<div class="image">
<img src=".." />
<div class="button"></div>
</div>
</div>
I have created a fiddle based on the link by Jake - http://jsfiddle.net/GkrpR/2/
It changes the size of the image and text box when you resize the screen.
It's a bit rough, so will require you to change the css values to suit your needs. But should be a good start for you.
It uses media queries in the css to check the max screen size, and then changes styles based on that.
As an example, when the screen size gets to 300px or less the following style is used:
#media screen and (max-width:300px){
.image img{width:45px;height:50px;}
.text{height:30px;font-size:6pt;color:#aaf;}
.main{width:100px;}
}
Hope this helps
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.