Hello I have one Nivo slider setting question . Currently I have one challenge and can not find the right solution -- trying to make webpage mobile friendly , auto resize image when I view it on mobile device.
here is my code and what I have tried , but still not having the right outcome as I want. does anyone can help me on this? not sure which part I did wrong.
<div id="banner_image">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img class="innerimage" src="image/1.jpg" alt=""/>
<img class="innerimage" src="image/2.jpg" alt=""/>
<img class="innerimage" src="image/3.jpg" alt=""/>
</div>
</div>
</div>
my CSS :
#banner_image {
width: 1024px;
height: 531px;
float: left;
margin-left: 10px;
padding: 0 0 0 0;}
#slider-wrapper {
width: 1024px;
height: 531px;
background: transparent;}
#slider {
background: url("../image/loading.gif") no-repeat scroll 50% 50% transparent;
width: 920px;
height: 400px;
position: relative;}
#slider img {
display: none;
left: 0;
position: absolute;
top: 0;}
I googled and tried below changes but the image still not able to resize on mobile screen. It's appreciate if anyone would help me to understand what I did wrong. thanks
<!--trying 1 -->
#banner_image, #slider-wrapper, .nivoSlide img{
width:100%;
height:auto;}
<!--trying 2 -->
<img class="innerimage" src="image/1.jpg" width="1024px" alt=""/>
<img class="innerimage" src="image/2.jpg" width="1024px" alt=""/>
<img class="innerimage" src="image/3.jpg" width="1024px" alt=""/>
CSS
#banner_image, #slider-wrapper, .nivoSlide img{
max-width:100%;
height:auto;}
Related
I am trying to have the text overlap the triangle on my code. Tried z-index but I still can't figure out what the error is.
Ten principles of rapid skill acquisition
by Josh Kaufman
<div class="table_theme_dark">
<div class="table__cell_theme_dark">
<ul>
<li class="table__heading_theme_dark">1</li>
<li class="table__text_theme_dark">Choose a lovable project</li>
</ul>
</div>
.kaufman-triangle {
position: absolute;
overflow: hidden;
width: 660px;
height: 636px;
top: 250px;
right: 0;}
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I have a problem with safari. I have searched for 6 hours straight for a fix, so exscuse me if my explanation is bad. So the thing is: I have added a hover effect on my thumbnails, it works in all browsers, but the thumbs are not placed correctly in safari and IE.
I have tried to use:
#media screen and (-webkit-min-device-pixel-ratio:0){
img.a {
position: absolute;
top: -500;
z-index: 10;
}
img.b {
position: absolute;
top: -500;
}
}
But this works for webkit browser, meaning chrome as well.
The css I am currently using which works in chrome and firefox:
img.a {
position: absolute;
top: -500;
margin-left: -115px;
z-index: 10;
width: 230px;
height: 120px;
border: none;
}
img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}
If anyone has a solution it would really save my day :)
Here is the site if you need to inspect: www.janthorb.com
Get rid of the CSS
div#thumbnails {
text-align:center;
}
and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.
You page code is a mess, no alignment. HTML structure is not reasonable, and cause CSS also is very not science. I rewrote your structure, you can reference.
.demo{ width:820px;margin:0 auto;}
.list{ margin-right:-20px; zoom:1;}
.list li{ float:left; width:230px; height:135px; margin:0 36px 25px 0; overflow:hidden; zoom:1;}
.link{ position:relative;width:228px; height:120px; display:block;border:thin dashed #1b1b1b; overflow:hidden;}
.link img{ position:absolute;top:0;left:0; }
.link .gray{ z-index:11;}
.link .hover{ z-index:10;}
<ul class="list">
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
</ul>
and demo is here
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?