So I need to achieve this effect.
I am using bootstrap by the way
https://gyazo.com/089764ced3250e52c184b16f991214e0
This is my initial code but I have no idea how to position it, I have tried everything and it still isn't responsive to the window. How best could I do this, thanks :).
<div class="row" id="banner-top-row">
<div class="col-md-12" id="banner-top-col">
<img src="img/banner-top.png" id="banner-top" class="img-responsive"/>
<div class="banner-information">
<h4> For More Information.... </h4>
<h1> Contact Us </h1>
</div>
</div>
</div>
Though I am not able to get what you exactly want but If I am getting right that you are expecting to be your image and content to be in center, without compromising responsive design.
Please check out it, if this snippet of code could help you out
http://jsbin.com/binusu/edit?html,css,output
Related
I'm only a few months old in web development and i know my code is pretty simple but i have tried everthing i know but it is not working. The text and image are not aligning side by side if i increase the width of the image to 100% . also i want the image to go off screen. here is my html code (removing the images since i cant post it).
My css code just contains width=100%; and overflow:hidden;
<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>
<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>
I do not have enough reputation to comment, so I will post this as an answer.
Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.
If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images
I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.
I'm a CSS beginner having a problem with Skeleton when the browser is resized. I have an image and text next to each other in columns as shown below (except much more text than shown below). This works fine, but when you reisze the browser to make it narrower, the text overlaps the image for a sizeable distance before it "snaps" below the image when you get to a very narrow browser width.
I think there's some way to fix this using the Skeleton CSS Utilities, but I haven't been able to figure out how. My understanding of CSS is very basic.
<div class="row">
<div class="one-third column">
<img src="images/myimage.jpg">
</div>
<div class="two-thirds column">
Lots of latin text here.
</div>
</div>
Add the following class to the image: u-max-full-width, like this:
<img class="u-max-full-width" src="images/myimage.jpg" />
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
I'm a newbie using bootstrap 3 for my website.
I'm trying to place an image next to some text, such that for large browser windows they sit horizontally side by side, but as the browser window is resized smaller, eventually they are stacked vertically (the image first, then the text below it).
Is this possible using HTML & CSS somehow?
You'll want to wrap them in a row and then col-spans. It should look something like this.
<div class="row">
<div class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
<p>This is the text you want.</p>
</div>
</div>
Assuming you're referencing your stylesheets correctly, this should do the trick. You will find this pretty well documented: http://getbootstrap.com/css/#grid-example-basic
I'm having trouble trying to figure out how to get the navigation on a site aligned properly. What I'm trying to do is have the navigation start at the left side of the page and stop at about 100px from the right side of the main content container div. The navigation is going to be in it's own container with no parent containers (unless someone has a solution that requires otherwise). At the end of the navigation I am going to put an image. The end result will look something like this:
My main problem is figure out how to set the widths and still be flexible for different screen resolutions. How would I go about doing this?
If you are going to put an image at the end and you want responsiveness, then you may want to consider to wrapper it in parent container.
<div class="parent">
<div class="leftside">
<div class="topmenu"></div>
<div class="botmenu"></div>
</div>
<div class="right-side">
<img src="image.png" />
</div>
</div>
See if this fiddle helps