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" />
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 was wondering if anyone could help me. I am trying to place an image in between two words in my header. e.g FirstName (Image) LastName. However, every time I try the image shifts the words so that everything is stacking and I want it horizontal. Can anyone help with this?
What I have done so far:
<div class="horizontal">
<h1>FN LN</h1>
<!-- box-b -->
<div class="box-b">
<img src="Images/Triangle.png" alt="Logo mark">
</div>
<!-- /box-b -->
</div>
So I'd want the image to move up between the two words.
Images are inline-block elements that should not 'break' your text onto multiple lines, if the issue is alignment, as discussed here you can use vertical-align in CSS to align your image inline with your text.
Like what #Psi mentioned:
<h1>FN <img src="..."> LN</h1>
Should work fine then tweak the CSS for alignment
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
I am currently working on a OpenCart project, and one of the pages requires a structure involving multiple images, being positioned closely together (see below).
All of the images that will be used are likely to be different sizes, but will need to be resized to a similar size (not the exact same size, but around the same). OpenCart's resize function is being used to resize these images, however the result leaves unwanted white space! (see below)
Is there any way to re-factor the code so the resized images have no white space around them?
Any help or guidance would be greatly appreciated
EDIT:
<div class="tbl">
<div class="tbl-row">
<div class="tbl-col">
<div class="frame">
<img class="imageFeatured" src="images/my-image.png" />
</div>
</div>
</div>
</div>
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