I’m trying to make the text contain to the image. I have it working perfectly for desktop and tablet, but I’m having a hard time with mobile. I have made it slightly better than it was but can’t think of what I’m overlooking.
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
display: block;
bottom: 0;
right: 0;
left: 0;
color: white;
padding: 0px 40px 0;
opacity: 0.;
}
Heres an image of how it looks :
Tablet :
Desktop :
<div class="container">
<img src="uploads/2018/09/App-Design.jpg" alt="App Design">
<div class="text-block">
<h6>App Design and Development </h6>
<p>We design and develop iPhone and Android apps for startups and enterprises that are fully compatible with your daily operational activities.</p>
</div>
</div>
Just to clarify, you're wanting to make the text for each section sit inside their respective images, and not let any text sit outside its image?
If so, use overflow: hidden; to hide all content that doesn't fit inside the image.
If I've misunderstood your problem, my apologies and would you be able to explain further?
Hope this helps!
I think you need to set height of each container in mobile size,
for example,
#media only screen and (max-width:480px){
.container {
position: relative;
height: 300px;
/* or */
min-height: 300px;
}
}
This is where im at now i feel closer but its not quite inside the box the title are still overlapping a little [Mobile view][1] https://ibb.co/dMfXez
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
Color: white;
padding: 5px 10px 0;
position: absolute;
bottom: 0;
left: 50;
opacity: 0.;
}
Is there away i can just make it so the description dissapears on mobile view and the title just stays there? but then the description is there on PC and Tablet mode?
Related
I am trying to add a text to a specific area of a background image in a responsive way. My problem is that on smaller screen like 213 the text is not reducing.
So far i did this
<div class="container">
<img src="http://usefaith.voiedusucces.net/images/decoupes/who_we_are.png" alt="" class="container__background-image" />
<div class="container__text">Who we are</div>
</div>
And for the css
.container {
width: 90%;
margin: 0 auto;
position: relative;
}
.container__background-image {
width: 100%;
display: block;
}
.container__text {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
#media all and (min-width: 213px) {
.container__text {
font-size: 5px;
left:0px;
bottom:-50px;
}
}
But when i check the site the text is not aligned properly. No matter how i reduce the size or try to adjust it, it is not working. I need the white text to be placed on the red part of the background
I need that text "Who we are" to be reduced and be on the red line.
Jsfiddle
Question :
How to reduce the size of a text on smaller screen ? Do i need to change the police before ?
You can make your text automatically change size along with the size of the window by defining your font-size in vhs or vws. For example:
#mystyle p {
font-size: 2vw;
}
You can read more about Viewport Sized Typography here:
https://css-tricks.com/viewport-sized-typography/
EDIT: You can then align the text to a certain corner of the screen using position: absolute and playing with the top and left properties until the text is where you want it.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I have a problem with precise positioning of three equal divs.
My humble knowledge of math reminds that 33+33+33=99%, and 1% is missed. Moreover, 33.33+33.33+33.33=99.99%, but browser compatibility does nothing with it.
<div id='products-choice-wrap'>
<div id='products-choice'>
<div id='choice1' class='three-bubbles'>
<img src='/products/image1.png' alt='' />
</div>
<div id='choice2' class='three-bubbles'>
<img src='/products/image2.png' alt='' />
</div>
<div id='choice3' class='three-bubbles'>
<img src='/products/image3.png' alt='' />
</div>
</div>
</div>
And CSS:
#products-choice-wrap
{ position: absolute; width: 100%; bottom: 0;
top: 100px; text-align: center; }
#products-choice
{ position: absolute; width: auto; left: 40px;
right: 40px; margin: 0px auto; top: 0; bottom: 0; height: auto;
max-width: 1080px; }
#products-choice div
{ position: absolute; top: 20px; height: auto;
overflow: auto; width: auto; padding-bottom: 200px; }
#products-choice #choice1.three-bubbles
{ left: 0; right: 66.7%; }
#products-choice #choice2.three-bubbles
{ left: 33.37%; right: 33.37%; }
#products-choice #choice3.three-bubbles
{ left: 66.7%; right: 0; }
In this construction three images are situated in the center of the page in a row. In case of small resolution they become smaller while #products-choice becomes narrow. The attribute max-width prevents images from overzooming.
Positioning should be very precise because of smooth lines connections between them (see links to examples below). The problem appears when comparing different resolutions in different browsers. It looks like in Chrome such positions as 33.37% to 66.7% provide excellent picture both on resolution 1280x*** (#products-choice is max-width: 1080px) and smaller 1024x*** (#products-choice width becomes 929px). Click here for image.
IE and Firefox show a 1-px-gap between images, which disppears and appears again after browser size changing. Click here for image.
What can I do to say Chrome, IE and Firefox exact width (which is actually 1/3)?
You can't achieve perfect 1/3 widths at all times with an elastic layout, so here's what I suggest:
Instead of using the position property to place your images, float:left them instead. This will ensure the three images are pressed up tight against one another, without the 1px gap appearing between them.
The downside: Sometimes you'll have a 1px gap to the right of the last image. You can sort of cover this up by assigning a background to the wrapper element, but in your case it seems like a better deal than having your images split apart.
.three-bubbles {
float:left;
width:33.33333%;
}
Demo: http://jsfiddle.net/qemUY/2
I left a lot of your CSS in which wasn't needed, because I don't know all of your requirements, but if you take this approach, your current code can be trimmed down considerably.
Simpler demo: http://jsfiddle.net/qemUY/4
Try to use
#products-choice-wrap {width: 99.99%;} or a lower value.
I had this issue before and I fixed it by setting the wrapper with {width:99.92%}.
I don't know why "99.92%", but I just tried some values on the inspector and that was the best fit.
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}
Hey all - I've been googling this as much as possible, but nothing I do seems to help.
I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.
I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).
It's driving me nuts, as its the last thing I need to sort before everythings fully working...
The code for the nav bar is here:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." />home.</div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." />biography.</div>
<div id="media"><img src="images/nav/media.png" alt="media." />media.</div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." />press.</div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." />Plane Dukes Rahman Trio.</div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." />contact.</div>
</div>
and the css styling is here (any optimization here is also welcome!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}
You are missing:
.nav a, .nav2 a {
left: 0;
}
That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.
UPDATE
Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:
BEST WAY:
Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div
QUICK WAY
.nav a, .nav 2 { background: url(/images/shim.png) }
Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.
Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.
Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.
I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.