Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Banner Image cropping on desktop, but not on phone? (I don't want image to crop on either)

Status
Not open for further replies.

kieran_mogg

New Coder
Please remember that when posting any code on Code Forum; it needs to be formatted using our special BBCode feature. Please review https://codeforum.org/threads/how-to-post-your-code-into-threads.183/ and https://codeforum.org/threads/code-of-conduct.4/
.landing-banner{position:top;width: 100%; height:40vh;background-size:cover !important;background-position:center center !important;color:#fff}.landing-banner:before{content:"";position:absolute;top:0;left:0;width:100%;height:00%;background-color:rgba(225,23,97,.6)}.landing-banner .row,.landing-banner .columns{height:auto}.landing-banner h1{font-size:100px;line-height:60px;margin:0px}.landing-banner h1 span{font-size:60px;line-height:60px}.landing-banner .logo{width:350px;margin-bottom:50px}.landing-banner p{font-size:1.5em;line-height:1.5em}.landing-intro{padding:200px 0 50px 0}.landing-intro .four{padding:0 20px}.landing-intro .four:first-of-type{padding-left:0px}.landing-intro .four:last-of-type{padding-right:0px}.landing-intro .whitebg{position:relative;padding:25px 25px 25px 25px;background-color:#fff;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.1);height:calc( 100% - 50px )}.landing-intro .whitebg img{position:relative;height:250px;display:block;margin:0 auto;margin-top:-150px}.landing-intro .whitebg h2{text-align:center;font-size:24px;margin:20px 0}.landing-intro .whitebg p{text-align:center}.landing-video{padding:100px 0;background-color:#f7f7f7}.landing-video h2{margin-top:0px;text-align:center}.landing-apply{padding:100px 0;text-align:center}.landing-apply h2{margin-top:0px}.landing-apply a{border-radius:100px;padding:15px 75px;background-color:#e11761;color:#fff;text-decoration:none;display:inline-block;margin-top:15px}.testimonials{padding:100px 0;background:#ef6a9a;background:-moz-radial-gradient(center, ellipse cover, #ef6a9a 0%, #e11761 100%);background:-webkit-radial-gradient(center, ellipse cover, #ef6a9a 0%, #e11761 100%);background:radial-gradient(ellipse at center, #ef6a9a 0%, #e11761 100%);filter😛rogid😀XImageTransform.Microsoft.gradient( startColorstr="#ef6a9a", endColorstr="#e11761",GradientType=1 );color:#fff}.testimonials h2{font-size:50px;margin-top:0px;margin-bottom:50px;text-align:center}.testimonials .landing-slider{text-align:center}.testimonials .landing-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;line-height:48px;text-align:center;border-radius:50%;border:2px solid #fff;font-size:1.2em;background-color:transparent;color:#fff;transition:all .4s linear;cursor😛ointer;z-index:999}.testimonials .landing-slider .slick-arrow:hover{background-color:#fff;color:#000}.testimonials .landing-slider .next-arrow{right:0}.testimonials .landing-slider .prev-arrow{left:0}.testimonials .landing-slider img{width:250px;height:250px;border-radius:50%;display:block;margin:0 auto 30px auto;object-fit:cover}.testimonials .landing-slider p{width:70%;display:block;margin:0 auto;font-size:22px;line-height:1.5em}.testimonials .landing-slider span.name{display:block;font-size:24px;font-weight:700;margin-top:30px}.testimonials .landing-slider span.centre{display:block;font-size:20px;font-weight:400;margin-top:5px}.landing-footer{padding:100px 0}.landing-footer h2{font-size:50px;line-height:60px;font-weight:600;margin-top:0px}.landing-footer p{line-height:1.5em}.landing-footer p span{color:#e11761;font-weight:700}.landing-footer .sticky{position:sticky;top:50px}.landing-footer .whitebg{background-color:#fff;padding:40px;box-shadow:0 0 10px rgba(0,0,0,.2);border-radius:10px}.landing-footer .whitebg p{font-weight:700;margin-top:0}.landing-footer .whitebg #gform_1 input,.landing-footer .whitebg #gform_1 select{padding:10px;border-radius:3px;border:1px solid #ccc;margin:0px}.landing-footer .whitebg #gform_1 input[type=submit]{padding:15px;display:block;text-align:center;border-radius:100px;width:100%;background-color:#e11761;color:#fff;border:0px;width:80%;margin:0 auto;cursor😛ointer}.embed-container{position:relative;padding-bottom:56.25%;overflow:hidden;max-width:100%;height:auto}.embed-container iframe,.embed-container object,.embed-container embed{position:absolute;top:0;left:0;width:100%;height:100%}@media only screen and (max-width: 800px){.landing-banner {width: 100%;} .seven{width:100%; height: auto}.row{padding:0 30px;width:calc( 100% - 60px )}.row .columns{padding:0 15px}.landing-intro .whitebg img{height:150px}.testimonials .one{display:none}.testimonials .ten{width:100%}.landing-footer .six{width:100%}.landing-footer .whitebg{margin-top:30px}}@media only screen and (max-width: 550px){.row{padding:0 15px;width:calc( 100% - 30px )}.row .columns{padding:0 15px}.landing-banner{width: 100%;} .logo{width:100%; height: auto;}.landing-banner h1{font-size:34px;line-height:24px}.landing-banner h1 span{font-size:24px;line-height:24px}.landing-banner p{font-size:1.2em}.landing-intro .four{padding:0 !important;width:100%;margin-bottom:150px}.landing-intro .four:last-of-type{margin-bottom:0px}.landing-video{padding:50px 0}.landing-video .one{display:none}.landing-video .ten{width:100%}.landing-apply{padding:50px 0}.landing-apply a{padding:15px 0;display:block;width:100%}.testimonials h2{font-size:34px;line-height:34px}.testimonials .landing-slider .slick-arrow{display:none !important}.testimonials .landing-slider .prev-arrow{left:-30px}.testimonials .landing-slider .next-arrow{right:-30px}.testimonials .landing-slider p{width:100%}.landing-footer h2{font-size:34px;line-height:34px}.landing-footer .whitebg
 
Status
Not open for further replies.

New Threads

Buy us a coffee!

Back
Top Bottom