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>
Related
I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.
I couldn't find the details after searching.
The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.
<div class="row">
<div class="col-lg-4">
SIDEBAR
</div>
<div class="col-lg-8">
<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>
</div>
</div>
I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-4">Column</div>
<div class="col-lg-3 col-xl-4">Column</div>
</div>
</div>
Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/
If this is not what you need, please try to be more clear about your goal.
I'm trying to display each image and its description on each half of the current browser screen. Here is my HTML:
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-6">
<p>Here is the description</p>
</div>
</div>
</div>
When I resize and reach the mobile phone viewport, the image and text are still displaying on each half of the screen. How can I make them display on top of each other, i.e: the text should be displayed right below the image on the next line?
col-6 split the screen for every viewport. You should use col-sm, col-md, col-lg or col-xl, depending on which screen size you wish to add the grid breakpoint.
You can check more informations here: https://getbootstrap.com/docs/4.1/layout/grid/
You're using bootstrap, so just use the baked in responsive utility classes;
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-12 col-md-6">
<p>Here is the description</p>
</div>
</div>
</div>
Use these breakpoints for mobile devices
#media(max-width:600px) //for mobile devices
#media(min-width:600px) //for laptop screens
Then use grid property
refer: Grid property
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.
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
I am using Bootstrap. In the following markup, when the browser window width is reduced to minimum, image spills over and not totally 100% visible.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<h1 style="display:inline;">Some heading here</h1>
<img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
</div>
</div>
How can I fit it?
You should use bootstrap's img-responsive class with a max-height rather than a fixed height to make the image scale nicely on small screens.
Bootstrap also has a convenience class pull-right which you can use instead of apply the float style inline.
<div class="row">
<div class="col-xs-12">
<h1 style="display:inline;">Some heading here</h1>
<img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
</div>
</div>
Here's a bootply example: http://www.bootply.com/x9KQXFqkGr
You should use min-width and max-width or make "height:38px" to height 100%. Using % values is more responsive than specifying pixels.
Use class="img-fluid" this works in Bootstrap 4. It sets max width to 100%. The height of image is set to auto.