I have a list of images in a div that is relatively positioned. In order to stack the images on top of each other I'm trying to absolutely position them.
However once I apply position: absolute to the image, it disappears. I'm using jcarouselite for the carousel so I'm not sure if something in the jcarousel script could be causing this.
#sliderContainer {
position: relative;
}
#sliderBtnPrev {
position: absolute;
top: 250px;
z-index: 9999;
}
#sliderBtnPrev img {
margin: 0px 30px;
cursor: pointer;
}
#sliderBtnNext {
position: absolute;
top: 250px;
right: 50px;
z-index: 9999;
}
#sliderBtnNext img {
cursor: pointer;
}
.slideImg {
width: 100%;
height: auto;
vertical-align: middle;
position: absolute;
}
.slideTxt {
float: left;
margin: -278px 0px 0px 150px;
background: rgba(20, 0, 17, .5);
width: 380px;
border: 1px solid #000000;
z-index: 100;
color: #ffffff;
font-size: 26px;
}
<div id="sliderContainer">
<div id="sliderBtnPrev">
<img src='http://www.placehold.it/200' alt="Previous">
</div>
<!-- end of sliderBtnPrev -->
<div id="sliderBtnNext">
<img src='http://www.placehold.it/200' alt="Next">
</div>
<ul>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">For every service rendered, for every man hour utilized, we make it count for you through quality training delivery service.
</p>
</li>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">Lorem ipsum id aptent suscipit curae donec nunc dolor,consectetur congue dolor viverra euismod.
</p>
</li>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">Lorem ipsum id aptent suscipit curae donec nunc dolor,consectetur congue dolor viverra euismod.
</p>
</li>
</ul>
</div>
<!-- end of sliderContainer -->
Jcarouselite code
// JavaScript Document
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});
return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";
var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());
o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});
ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});
var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));
c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});
if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});
if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;
else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
what i have in my functions.js
// JavaScript Document
$(window).load(function(){
//Activate the Slider
$("#sliderContainer").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible:1,
circular:true,
scroll:1
});
});
You've defined your first image as both position: relative and position: absolute. Could that be causing the error?
Your code:
#sliderContainer {
position: relative;
}
#sliderBtnPrev {
position: absolute;
<div id="sliderContainer">
<div id="sliderBtnPrev">
<img src='http://www.placehold.it/200' alt="Previous">
</div>
Related
the photo should be positioned to the right and become smaller than the parent element, this is a react component and the photo should be placed responsively.
.image {
position: absolute;
border-radius: 1rem;
left:0px;
height: auto;
width: 100%;
}
the html of the photo container:
<div className={styles.container}>
<div className={styles.title}>{title}</div>
<div className={styles.about}>{about}</div>
<img src={image} alt={title} className={styles.image} />
</div>
.container {
width: auto;
#include flex(column, center, flex-start);
padding: 3rem 10rem;
background: #2697fe;
border-radius: 1rem;
margin: 1rem;
position: relative;}
.image {
border-radius: 1rem;
height: auto;
right: 20vw;
max-width: 80%;
}
it gives this result and I need help with the position of the photo again:
the photo in the small size screen(the border is no longer rounded):
I think your HTML document structure is like this:
<div className="section1">
<div className="text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<img className="image" src="https://picsum.photos/200" alt="img" />
</div>
Using the Position property may not give you an appropriate layout every time in such designs.
You can make use of the CSS Flex Box to arrange the items inside the "section1" like this:
.section1 {
background: lightblue;
border-radius: 2rem;
margin: 2rem;
padding: 2rem;
display: flex;
justify-content: space-around;
}
.image {
border-radius: 1rem;
right: 20vw;
height: auto;
max-width: 80%;
object-fit: contain;
}
/* rsponsive design --- small screen size */
#media screen and (max-width: 640px) {
.section1 {
flex-direction: column;
}
.image {
border-radius: 1rem;
right: 0;
height: auto;
max-width: 100%;
object-fit: contain;
margin-top: 1rem;
}
}
This will give you a layout like this:
small screen size
large screen size
hope this answers your question :)
make sure to give the parent div that holds the image a width and height.
Then make sure that the image has a max-width: 100% and a max-height: 100% Don't work with width and height with images as that can lead to horrible responsive issue's.
Hope this helped, if theres something I can do better to bring more clarity let me know.
You need to add more flexbox structure around your HTML/JSX elements to get the image to sit to the right of the text. If you want to have the image sit inline with the text, the flex-box direction should be row (which is the default).
i.e.,
// jsx
<div className={styles.container}>
<div className={styles.innerContainer}>
<div> <-- Extra surrounding divs keeps flex children elements grouped correctly.
<div className={styles.title}>{title}</div>
<div className={styles.about}>{about}</div>
</div>
<div>
<img src={image} alt={title} className={styles.image} />
</div>
</div>
</div>
// styles
.container {
width: auto;
#include flex(column, center, flex-start);
padding: 3rem 10rem;
background: #2697fe;
border-radius: 1rem;
margin: 1rem;
position: relative;
}
.inner-container {
display: flex; <-- puts image inline. (direction "row" by default)
}
.image {
width: 100%;
}
Depending on how much you want the image to sit to the right, you may need to modify the container and inner-container styles.
Here's my css code and HTML. Whenever a line in my carousel-caption becomes too long it falls off the image. When I minimize the window, however, the caption eventually moves into the image creating the effect I really want. Wondering how I can contain it to the image? Thanks for the help - because I am relatively new to CSS/BOOTSTRAP styling.
* {
margin: 0;
padding: 0;
}
a {
background-color: transparent !important;
color: white;
}
img {
max-width: 100%;
max-height: 80vh;
margin: auto;
}
.carousel-caption {
padding: 30px;
background-color:transparent !important;
position: absolute;
}
.picsum-img-wrapper {
padding-bottom: 20px;
padding-top: 20px;
background-color: #8E9AAF ;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
font-weight: 600 !important;
display: grid;
height: 100%;
}
h3 {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true"
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
[interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
</div>
</div>
</ng-template>
</ngb-carousel>
I integrated this slider into my website after I find that it is not working on IE11 and safari :
Here is a link to the slider's code :
https://codepen.io/gvrban/pen/qjbpaa
IT works fine in Chrome and in IE11 I have tried changing the style but the problem persist. I think it is related to the flexbox.
HTML part (only one slide ):
<div class="slider">
<div class="slider-wrapper flex">
<div class="slide flex">
<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
<div class="slide-content">
<div class="slide-date">30.10.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
<div class="arrows">
</div>
</div>
CSS part:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}
.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw; margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}
div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}
.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
JS part:
( function($) {
$(document).ready(function() {
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('next') ) {
( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
} else if ( $(this).hasClass('prev') ) {
( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
}
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
//CONTENT ANIMATIONS
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
Many thanks.
Good morning,
you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
The solution :
remove flex class from your slide html code and change the display to block to get the same calculation cross browsers and you should add another div inside it to keep your flex style.
change your HTML slide code to :
<div class="slide">
<div class="slide-container">
<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
<div class="overlay"></div>
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="slide-date">30.07.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
</div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
</div>
and add these css styles :
.slide {
display:block;
}
.slide-container{
display: flex;
}
.slide-content-inner{
width:35vw;
padding: 5%;
}
And change these (remove the padding and change width) :
.slide-content {
width: 50vw; //changed to 50vw
color: #fff;
/*padding:3vw 18vw 3vw 9vw;*/ //removed
}
You get the solution with extra styling :)
Basically,
I have a gradient bar and on hover of the USP's below the bar the gradient moves to above that USP with a triangle. Now I'm trying to figure out how I can get the center of an SVG to center inside of the USP on hover to make the gradient look like it has a triangle also. It's a little hard screenshot and codepen below.
http://codepen.io/nsmed/pen/MpOLpp?editors=1100
<section class="small-business-split-header-block">
<div class="wrapper">
<h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
<p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
</div><!--wrapper-->
<div class="usp-bar">
<p class="usp-one active">Telephone Answering</p>
<span><img src="http://svgshare.com/i/y4.svg" /></span>
</div><!--usp-bar-->
</section>
<div class="usp-list cf">
<div class="usp active">
<a href="#">
<p>Need your own<br /><strong>dedicated PA?</strong></p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for<br />an auto attendent?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Missing calls<br />on your mobile?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for a<br />business number?</p>
</a>
</div><!--usp-->
</div><!--usp-list-->
Here try this, click on items to see the beak moving. It's not a production ready code, but you can take it from here :)
Markup
<div class="bar">
<div class="bar-background">
<div class="bar-slider"></div>
</div>
</div>
<ul class="menu">
<li class="menu-items">Item 1</li>
<li class="menu-items">Item 2</li>
<li class="menu-items">Item 3</li>
<li class="menu-items">Item 4</li>
</ul>
SCSS
$bar-height: 6rem;
$bar-slider-height: 2rem;
$bar-slider-background: #ffffff;
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
}
.bar {
position: relative;
}
.bar-background {
background: -webkit-linear-gradient(
left,
rgba(0, 175, 169, 1) 30%,
rgba(1, 180, 172, 0.15) 60%);
height: $bar-height;
overflow: hidden;
width: 100%;
}
.bar-slider {
height: $bar-slider-height;
margin-top: $bar-height - $bar-slider-height;
display: flex;
width: 200vw;
transition: transform 1s linear;
&:before,
&:after {
content: "";
width: 100vw;
display: block;
background: $bar-slider-background;
height: $bar-slider-height;
}
&:before {
transform: skew(45deg) translateX(-50%);
}
&:after {
transform: skew(-45deg) translateX(-50%);
}
}
.menu {
height: 2rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu-items {
list-style: none;
}
JS
var slider = $('.bar-slider'),
sliderCenter = parseInt(slider.width() / 4, 10); // taking 1/4 here because our slider is twice the width of viewPort
$('.menu-items').on('click', function() {
var activeClassName = 'is-active';
$(this)
.addClass(activeClassName)
.siblings()
.removeClass(activeClassName);
var activeItem = $('.' + activeClassName),
activeItemPositonFromLeft = activeItem.position().left,
activeItemCenter = parseInt(activeItem.width() / 2, 10),
newPos = parseInt(activeItemPositonFromLeft - sliderCenter + activeItemCenter, 10),
translateX = 'translateX(' + newPos + 'px)';
slider.css({
transform: translateX
});
});
http://codepen.io/robiosahan/pen/gmopRJ
I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.
Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.
Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>
Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>