I want to place a paragraph float to the left, while an image floats to the right.
(working demo -> https://jsfiddle.net/DTcHh/6557/)
There will be some paragraphs without an image, so I was wondering how I would be able to make this responsive. As of now, when I resize the window, nothing stacks or changes.
I wanted to incorporate using
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
But it doesn't seem to be working the way I want it to. Thank you!
I made a quick fiddle here: https://jsfiddle.net/AndrewL32/e0d8my79/42/ with text on the left and an image on the right and they seem to be stacking as they should.
I think the reason why your columns are not stacking is probably because you didn't link your bootstrap files properly (on the jsfiddle you made and most probably in your html file too).
Try adding this line to your <head>....</head> section:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
And check if that helps.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I'm new to bootstrap. Here I'm not able to figure out how can I achieve this kind of layout alignment using bootstrap. I tried but not able to achieve this, can anybody help me to do this!
Here is, what I want to achieve:
Here, there are two boxes side by side, left box (green with text) and right box having youtube video. when you resize it, that green box should go to the top of video box like stack. The text inside the green box should be vertically and horizontally center aligned.
You can use different CSS definitions for different window size.
Look here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here: http://getbootstrap.com/css/#grid-media-queries
and here (example matching your problem): http://learnlayout.com/media-queries.html
You can create that layout with bootstrap. You may need to write your own because bootstrap's grid adds gutters between columns by adding padding. You should be able to add a background color to a column, but the content does not touch the edge like in the video example you posted.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">Green box</div>
<div class="col-xs-12 col-sm-9">Video</div>
</div>
</div>
Take a look at this jsfiddle for an example.
Read through Bootstrap's grid documentation if you would like to modify it.
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
http://bootply.com/101886
why the second row left a gab there? I want to ask is this the right way or the right markup of a template? I found sometime my div isn't aligned properly. Do you guys think use container again to wrap all the <div class="container"><div class="row"><div class="col-md-12"> is a good practice? because when you resize into mobile, there isn't padding.
Is this what you want to do?
http://bootply.com/101968
I think paddings for the background is not necessary but for texts it is better to have proper paddings in mobile view, which is Bootstrap3's default settings.
I have made a carousel of items using the Malsup Cycle plugin. It all works great except when zooming in IE7. The borders on the list items seem to fly off while the text remains fixed or hidden by other elements.
The HTML contains some extra containers to make vertical alignment in IE7 work the way we need it. Otherwise the HTML fairly standard. Fiddle below
<li>
<div class="outerContainer" style="width:55px;"> <!-- example of a specific width applied -->
<div class="innerContainer">
<div class="element">
Incoming Arrival</div>
</div>
</div>
</li>
http://jsfiddle.net/QypfY/
I know JS Fiddle doesnt work in IE7 but perhaps someone has an idea of whats going wrong. I tried changing the absolute positioning to relative but i still get the same issue.
Any help much appreciated.