I'm trying to create a banner featuring some services I provide, the image below is exactly how I want it (desktop view) but when I resize the browser the text gets pushed underneath the image and is hidden by over elements of the page overlapping.
How do I make it so the image and text resize with the browser and looks exactly the same as it does on desktop?
I created an example on here http://jsfiddle.net/b7a8cvLb/4/
And my CSS
.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;
}
.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}
.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}
.info_block h5 {
height:100%;
width:100%;
margin:0;
}
If needs be I can set the images to display:none at a certain browser width but I'd prefer to avoid doing this.
I can see your images are already scaling down, if you want to scale down your text too you'll need to step it down using media queries.
Hope that helps!
Related
I developed a website that contain some images , some of them are main images with about 3000px in width .
I'm using this to make the image fill the whole width and it's working with me during testing but the client said that it's not taking the whole width and sent me screenshots :
img{
display:block;
max-width:100%
height:auto;
}
Here is the demo link of the website:
http://www.zhtml.aba.ae
How to make it work?
He was browsing it from Chrome Browser on MAC
You only defined the maximum width, which is 100% of the page. You should try to replace "max-width" for just "width".
img{
display:block;
width:100%
height:auto;
}
See the differences by changing your browser: You'll understand the difference.
<style>
div.e1 {
width:400px;
margin: auto;
border: 5px solid #73AD21;
}
div.e2 {
max-width:400px;
margin: auto;
border: 5px solid #73AD21;
}
</style>
<div class="e1">width: 400px;</div>
<br>
<div class="e2">max-width: 400px;</div>
<p>blablabla</p>
Wondering if someone can help.
I'm a beginner learning website development and have been playing around with different styles for a particular project. The one I'm trying at the moment has a background colour, on top of this is a central wrapper of 60% width which contains all the website gumph. on the sides of the wrapper I have text turned 90/270 running down the wrapper with the website name.
When I go to resize the website the text jumps, how do I get the text to stay in it's original position? Also a secondary question, the text I have put as a % in CSS, however it doesn't seem to resize with the screen, even if I try em, here is the css:
*{
background-color:#085C08;
max-width:100%;
max-height:100%;
min-width:200px;
margin:0 auto;
}
.wrapper{
width: 60%;
background-color: #FDF3EC;
margin:0 auto;
margin-top:-1%;
margin-bottom:-1.5%;
}
.artwork-r{
transform:rotate(90deg);
white-space:nowrap;
transform-origin:bottom;
margin-top:-52.5%;
margin-left:78.65%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-r p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
.artwork-l{
transform:rotate(270deg);
white-space:nowrap;
transform-origin:top left;
margin-left:15.1%;
margin-top:0.4%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-l p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
when position the text, don't use margin-left or margin-top, those will change as the screen size changes. You should use top, bottom, left and/or right.
For the font size, em's and % are both based NOT on the screen size, but instead it's parent's font size. Without seeing your markup I am not 100% sure, but you will probably want the position of .artwork-l to be set as right: 100%;
The content boxes on each of my pages uses the same CSS, however on one page there is a scroll bar in the content box, and the footer does not sit properly.
This is because I use overflow:auto, but when I remove overflow:auto, the content box disappears completely. (The content itself still remains)
I'm not sure what the problem is, since they all use the same CSS and the other pages work fine.
This is the CSS for my content box
#contentProducts {
background:rgba(255,255,255,0.6);
width:80%;
min-height:100%;
overflow:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-radius:20px;
box-shadow: 4px 4px 10px black;
}
the content on the page is just 4 boxes with pictures, the css for those is
#clothingProduct {
padding-top:40px;
position:relative;
background-position:center;
background-size:cover;
text-align:center;
float:right;
width:300px;
height:140px;
margin-right:12%;
margin-top:60px;
margin-bottom:30px;
}
and this is the CSS for my footer
#footer {
float:left;
bottom:0;
position:static;
background:rgba(255,255,255,0.6);
width:100%;
height:20px;
color:black;
margin:auto;
overflow: hidden;
}
Basically, it should look like this (and does on other pages)
but on the product page, it looks like this
I have a workaround fix that involves just setting the height of the box in pixels, but that still doesn't fix the footer sitting in the wrong place.
If you need any more info just let me know, any help would be greatly appreciated.
Normally when I have a problem along these lines it has to do with a typo/mistake in the HTML. Not closing a tag properly or something along those lines, but it is hard to tell without the relevant HTML.
So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens
Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window
.header{
position:absolute;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
Hope it helps, if you post your code maybe i can be more useful.
Regards
EDIT 1:
This should resolve your problem:
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
I have a page with a vertical drop down menu, and i need to create a photo gallery next to it, however, the gallery is displaying below the menu instead. I've tried adjusting the dimensions to make room for it, but nothing is working.
#gallery {
position:absolute;
float:left;
display:block;
width:500px;
}
.square {
width:150px;
height:150px;
float:left;
position:relative;
background-color:#dbdbdb;
}
.square2 {
width:149px;
height:149px;
float:left;
position:relative;
border: 1px solid;
border-color:#dbdbdb;
}
There are multiple ways of achieving this:
Apply the style display:inline-block; to the DIVs in question
Specify float:left; and a width: on the DIVs that should be next to each other
(For either method) make sure the container is wide enough to fit both of them next to each other