I create one page with bootstrap and add 3 svg images. Now, on desktop is look good, but when I change view on mobile two images disappear. How I can fix this view for mobile?
This is desktop screenshot
This is mobile when I lose two images
HTML:
<div class="col-lg-12 row-1 mid">
<div class="col-lg-8">
<img class="img-fluid img-icon icon1" src="img/icon/web-dizajn.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
<img class="img-fluid img-icon icon2" src="img/icon/graficki-dizajn.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
<img class="img-fluid img-icon icon3" src="img/icon/web-hosting.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
</div>
<div class="col-lg-4">
<h4>Web Dizajn</h4>
<p></p>
<p>
Pročitaj više
</p>
</div>
</div>
CSS:
.row-1 {
display: flex;
}
.mid {
text-align: center;
background: linear-gradient(to top, #ffffff 0, #ffffff 100%);
border-radius: 35px;
padding: 50px;
border: 15px solid #f7f7f7;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.img-icon {
width: 50%;
}
.icon1 { padding:0px; }
.icon2 { position: absolute; left: 0; padding:75px; top:50px; }
.icon3 { position: absolute; right: 0; padding:75px; top:50px; }
When your viewport size is < 992px, the icon size with padding is 150px. Since you have a padding of 75px, the left and right padding "eat up" the whole width space (75 + 75 = 150), which leaves no room to show the actual image. You need to reduce the padding with a CSS media query, like this:
#media (max-width: 991px) {
.icon2 { position: absolute; left: 0; padding:35px; top:50px; }
.icon3 { position: absolute; left: 0; padding:35px; top:50px; }
}
And maybe change the top value as well. Experiment with different values until you get the exact look you're aiming for.
From your live demo, seems like you're using padding to reduce size of your svn image. Problem is padding is larger than container, causing image having inside width and height 0. Consider using percent width and height like your first image or use media queries to reduce padding values on mobile.
When you decrease the screen size you will need to edit the css for .icon2 and .icon3 so that the padding doesn't result in the image disappearing so that there is no space for the image to display.
Try this
#media (max-width: 992px) {
.icon2 {
padding:10px;
top:20px;
}
.icon3 {
padding:10px;
top:20px;
}
}
992px is the biggest width before the large screen changes. The position and left will be same throughout.
You need to change the positions for icon2 and icon3 in mobile resolution and try remove the padding for these icons. If you post a plunker it will be helpful to give the exact solution.
Related
I am trying to create a banner using 3 images as shown in this codepen
The view is all ok if it is over 1200px but when screen size goes down, it gets overlapping.
.yourlimit img:first-child{
position: absolute;
left: -8%;
bottom: 0;
}
.yourlimit img:last-child{
position: absolute;
bottom: 40%;
right: -8%;
}
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container px-md-0 my-5 mx-auto position-relative text-center yourlimit">
<img class="" src="https://i.ibb.co/GWFDsFk/limit-left-border.png" alt="">
<img class="img-fluid" src="https://i.ibb.co/t2388tK/limit-img.png" alt="">
<img class="" src="https://i.ibb.co/XjHJ1dZ/limit-right-border.png" alt="">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</html>
Any idea will be appreciated.
First, I suggest making the main, center image (https://i.ibb.co/t2388tK/limit-img.png) not have the white lines on either end that are already covering up some of the text - that will be impossible to line up across browsers and screen sizes.
Next, I achieved the desired effect by adjusting your CSS. I removed the bottom rules because that was preventing the images align at the top, which makes it simpler to adjust IMO. I also set the first image to left: 0; and the last image to right: 0.
From there, your have the following rules to adjust until you get what you want are the width of each image:
width of each image (in percentages for responsive layout)
absolute positioning if you really need to, but I don't think it's necessary.
Here's my new CSS to plug into your Codepen. Note that I put red borders around the images just to get a sense of where they are - obviously remove these once you're done.
img {
border: solid red 1px;
}
.yourlimit img:first-child{
position: absolute;
left: 0;
width: 20%;
}
.yourlimit .img-fluid {
width: 80%;
}
.yourlimit img:last-child{
position: absolute;
right: 0;
width: 20%;
}
You can use media queries to target the two images so that the size is reduced on smaller screens.
For example:
#media screen and (max-width: 600px) {
.yourlimit img:last-child{
width: 50%;
}
.yourlimit img:first-child{
width: 50%;
}
}
Note that you will have to adjust the width in order to determine what will work best for your use case.
As the screen gets smaller in width the container shrinks as well. So your left and right images are +-8% of the scrunched up container. The easiest option is to give the container the width of the center image:
.container {
width: 1140px;
}
So my page looks fine in a desktop, but when I look at it through any other device, (phone, tablet) the text on the page has moved lower into the other content. Is there a way to make it so that the text shrinks as the image does?
Here is my HTML:
<div class="hero">
<img src="resources/assets/home_header.png" alt="youth futures header"/>
<div class="text">
<h1>Hi</h1>
<p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>
</div>
</div>
Here is the CSS:
.hero {
width:1280px;
margin:0rem auto;
position: relative;
}
.text {
position: absolute;
top:50%;
left:0;
padding:1rem;
transform:translateY(-50%);
text-align:center !important;
margin: 0px 197px 103px 531px;
}
use media queries to reduce the font sizes on small screens
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
First, please consider this fiddle.
I need to get some links over specific image regions, however those images are scaled according to the parent size...
that's why the link's position and size are relative(percentages) to the image.
But the fiddle shows the problem of this approach.
Is there anyway to get the .image-wrapper to "mimic" the img size and position after scaled?! Any trick or whatever?
Note: I'm OK with webkit-only solutions!
Edit 1
Actually I'm more focused in making the image fit on the content div, then making the image wrapper follow the resulting image size. Here's what I achieved so far...
Now I'm trying to get it working with the image centralized.
Here is the CSS skeleton for a solution.
Suppose your HTML looks like the following:
<div id="content1" class="content portrait">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/200/250" />
</div>
</div>
</div>
<div id="content2" class="content landscape">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/300/200" />
</div>
</div>
</div>
The HTML is similar to your original code except that there is an extra wrapper .panel-wrapper.
I used the following CSS:
.content {
background: lightgray;
display: table;
margin: 40px 0;
}
#content1 {
width:100px;
height:150px;
}
#content2 {
width:150px;
height:150px;
}
.panel-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.image-wrapper {
outline: 1px solid green;
position:relative;
display: inline-block;
}
.content img {
display: block;
width: 100%;
}
.portrait .image-wrapper {
height: calc(100% - 2px);
}
.portrait .img {
height: 100%;
}
.landscape .image-wrapper {
width: calc(100% - 2px);
}
.landscape .img {
width: 100%;
}
.sample-link {
background:rgba(0, 0, 255, 0.3);
position:absolute;
display:block;
width: 50%;
height:20%;
top:5%;
left:5%;
}
I apply display: table to .content and display: table-cell to .panel-wrapper so that I can get a get the image centered both vertically and horizontally.
The .image-wrapper has display: inline-block.
To get the scaling right, you need to consider two cases depending on the aspect ratio of the image.
For portrait images, apply height: 100% to the .image-wrapper and the child img.
For landscape images, apply width: 100% respectively.
If you have a border on .image-wrapper, use the CSS calc() function to adjust for the 2px width of the borders.
What you need to do is use JavaScript/jQuery to determine the aspect ratio of the image and then apply the correct class (.portrait or .landscape) to the .content block.
See demo at: http://jsfiddle.net/audetwebdesign/SZjvJ/
A possible way is to work with image ratio and to adjust link ratio and margins according to image dimensions, with Jquery.
Have a look at this example fiddle: http://jsfiddle.net/t7Ucj/
The Js measures width and height of the image and according to its ratio, it works on the width or on the height of the link.
var width = $('#content2 img').width();
var height = $('#content2 img').height();
//vertical image
if(height > width){
var left = $('#content2 img').css('margin-left');
$('#content2 .sample-link').css({'width': width, 'left' : left});
}
else{
var top = $('#content2 img').css('margin-top');
$('#content2 .sample-link').css({'height': height*0.2, 'top' : top + height*0.4});
}
Then you can wrap all the instructions in a simple function obviously.
I know it can be tricky to put all the possible cases but i had a similar problem and solved in this way.
hope it helps
I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.
My code so far (I used colors as a visual aid)-
css:
#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }
html:
<html>
<body>
<div id="leftside"> </div>
<div id="container">the content</div>
<div id="rightside"> </div>
...
So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?
Thanks for the help.
you can achive by doing this with css
#maindiv{
width:1000px;
}
#rightdiv, #leftdiv{
width:calc((100%-1000)/2);
}
#rightdiv{
//other styles
}
#leftdiv{
//other styles
}
test browser support for calc()
You'd have to inject some javascript code:
$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);
See demo
Then use media queries to change the middle div's width when the screen gets smaller.
One way is to put the divs in a table with one row and 3 cells. The table will have width 100% and you can set the width of the centre td.
I'm sure someone will suggest a better way in CSS though.
I'm trying to align a html-page with the bottom of the browser-window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
The problem with this solution is that when the screen is smaller than 950px high, the top of the outer-wrapper disapears above the screen and no scroll is added. Both the body and the outer-wrapper has a background-image.
Here is a sample, as you can see, the top of the red box is above the body.
http://jsfiddle.net/C5Nce/1/
The following demo should work, if I understand what you want correctly:
http://jsfiddle.net/C5Nce/10/show/
I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:
#media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
I've coloured it green so you can tell when the query fires.
.outer {
position:absolute;
height:100%;
width:100%;
background-color:#aaaaaa;
margin:0;
padding:0;
}
.content {
position:relative;
width:90%;
height:90%;
background-color:#444444;
margin:5%;
}
.inner {
position:absolute;
height:20%;
width:100%;
background-color:#eeeeee;
bottom:0;
margin-bottom:10%;
}
<div class="outer">
<div class="content">
<div class="inner"></div>
</div>
</div>
http://jsfiddle.net/L8H9J/
1) Remove the margin-bottom style from the inner class
2) All the content you add inside the inner class will be aligned with the bottom
3) Because of the flow of the document in HTML, you cannot explicitly align them with the
bottom
4) You can use this trick to do so, but again all elements inside the inner class will be
with flow of position:static
5) There comes the use of JavaScript to determine suitable margins for each element inside
the inner class
Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:
I would just give your outer-wrapper a height of 100% (along with html, body):
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.outer-wrapper {
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
overflow-y: auto;
background-position:bottom; //Edit
}
Then the outer-wrapper will always keep the body's height. There’s no need for the 950px height min because in the case that the viewport is too small you wanted for this to scroll and in the other case the viewport is bigger than 950px - well, it's bigger than 950px - that's a good thing.
Edit section from your code here
.outer_wrapper
{
background-color:red;
/*min-height: 550px;*/
margin-left: -75px;
top:auto;
bottom: 0;
position: absolute;
left:50%;
}
and you are specifying your red box is above the body, if you put it inside body it supposed to be placed like it as you also have specify min-height of container.