I have the following going on:
<div class="row">
<div class="col-md-4 content-column">
<img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button">
<h2 class="btn-desktop-headline">Desktop Applikationen</h2>
</div>
<div class="col-md-4 content-column">
<img class="btn-center btn-webdesign" src="images/buttons/btn-webdesign.svg" alt="webdesign button">
<h2 class="btn-webdesign-headline">Webdesign</h2>
</div>
<div class="col-md-4 content-column">
<img class="btn-center btn-ios" src="images/buttons/btn-ios.svg" alt="ios Logo button">
<h2 class="btn-ios-headline">iOS</h2>
</div>
</div>
Now depending on the image size, the headlines move further down or not. How could I fix this?
Best way to deal with this is that placing divs with full width and css specified heights. And while you get images from server side you should bind them in style attribute.
Advantage of doing this is that you can stretch images without messing aspect ratio and position it to center of div.
Related
I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)
I'm new to web development, and I'm trying to make a static responsive website.
So far, I was able to make a responsive navigation bar, but I'm stuck at how to make this layout.
This layout on mobile should look like this:
So far, I've found this code on the bootstrap website, and it resizes images depending on the browser's width.
<img src="..." class="img-fluid" alt="...">
However, I don't know how to add text near the "image". If I put "image" and "text" in the same div, the code above acts weirdly. The image doesn't resize immediately. It looks like the div's size changes and then the image's size changes depending on that.
Can anyone help me to make this layout?
I guess you have to work better with the DIVs to get the result you want. Imagine that the divs is like organizers boxes and you don't want to mess up with the things inside.
You can do something like this:
<div class="row">
<div class="col-md-6">
<img src="https://cdn.auth0.com/blog/new-bootstrap4/logo.png" class="img-fluid" alt="...">
</div>
<div class="col-md-6">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>empty text</p>
</div>
<div class="col-md-12">
<img src="https://itriangletechnolabs.com/blog/wp-content/uploads/2020/05/bootstrap-illustration.png" class="img-fluid" alt="...">
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>text</p>
</div>
<div class="col-md-12">
<img src="https://socpub.com/sites/default/files/images-2018/Bootstrap.jpg" class="img-fluid" alt="...">
</div>
</div>
</div>
As you can see in this fiddle: https://jsfiddle.net/xjohnatha/L34gb05r/1/ (just remember to resize the splitted window to get it responsive)
just add the bootstrap class accordingly :
total 12 columns in page so you have to divide accordingly
mobile device use class : "col-xs-6" or "col-xs-12"// according to requirement
Small device use class : "col-sm-6" or "col-sm-12"
medium device use class : "col-md-6" or "col-md-12"
large device use class : "col-lg-6" or "col-lg-12"
<div class ="col-sm-6">
<img src="" />
</div>
<div class ="col-sm-6">
//text
</div>
// for leave blank space use "col-sm-offset-6" so it will leave half container blank and element in other half.
I'm having trouble with making some of my div elements responsive.
The image with the magnifying glass is refusing to resize when the window is smaller, for example on a ipad. I have tried other methods of resizing but resulting in failure.
Website link: http://onlinestaff.net
Problem: The magnifying-glass-image on your website uses the attribute max-width:none which causes the image to be displayed in full size even on smaller screens.
Solution: When making images responsive we usually use the CSS attribute max-width:100% to ensure that big images scale down to fit on the screen (or better: fit into the parent container)
You can try something like this to make divs responsive and their position relative to the size of screen:
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
Bootstrap Grids
I'm having an problem with the Bootstrap grid system can't seam to position my content the right way that I want to. Here is what I have so far.
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
<div class="col-md-2"><h3>My Website</h3></div>
</div>
</div>
</header>
Goal
What I want to achieve is to have a full width web page for large desktops and responsive for mobiles where the logo image and the "My website" slogan will be on the left and the content will be positioned in the center.
Here are some images of what i want to achieve on desktop and mobile http://s16.postimg.org/tbt4b5det/Untitled_1.png - Desktop
http://s10.postimg.org/mbijfjvkp/Untitled_2.png - Mobile
check below what have:
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="/logo.png" alt="" class="img-responsive"/>
</div>
<div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
<div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
<div class="col-md-6 col-md-offset-3">
<div class="disclaimer">
<p>Some text here</p>
</div>
<div class="link">
<span>Follow Us</span>
</div>
</div>
</div>
</div>
</section>
Other Issues
It seams every time i test for different devices or simple resize the browzer the image goes extra small until it get to sm devices and than again continues to get smaller.
Thank You
I thank you for your help i'm new in web development any suggestion is appreciated.
The way I'd do it is by changing the container class to <div class="container-fluid" style="text-align:left;"> allowing for full width usage of a screen.
Then, just put a <div style="text-align: center;"> around what you want to center.
Though this will make all elements stretch the entire screen width, including the col-*-* classes. Just add col-*-offset-* as required to adjust for this.
Your img is getting smaller because of the img-responsive class.
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>