newcoder1010

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; max-height: 550px; width: 100%; } Now it is better than before. But the problem is that as I am screen sizes are decreasing, the images do not look good because it is trying to fit image on smaller screen with the same height. How can I fix it? Thanks!

Hello, <div id="carousel-block-generic" class="carousel slide" data-ride="carousel" data-wrap="true" data-interval="4000" data-pause="hover"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-block-generic" data-slide-to="0" class="indicator-item"> </li> <li data-target="#carousel-block-generic" data-slide-to="1" class="indicator-item"> </li> <li data-target="#carousel-block-generic" data-slide-to="2" class="indicator-item active"> </li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item item"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title 1 </h3> <p> caption 1 </p> </div> </div> <div class="carousel-item item"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_0.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title 1 </h3> <p> caption 2 </p> </div> </div> <div class="carousel-item item active"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_1.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title </h3> <p> caption 2 </p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control carousel-control-prev" href="#carousel-block-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left carousel-control-prev-icon"></span> </a> <a class="right carousel-control carousel-control-next" href="#carousel-block-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right carousel-control-next-icon"></span> </a> </div> Default CSS on image: .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; } Original images heights are 575px and 700px width. I just wanted to make the images width 100%. Once I apply css as width:100%, images height become more than the original heights. .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; width: 100% } How can I make the images 100% width by keeping the original heights? Thanks!

I am not able to follow you. Div class fixed element will be business logo eventually. I am just trying to put the fixed div class on top of the slideshow so slideshow will be below the div class. I also tried .fixed {position:absolute;} and it did not work. Can you please help me with some code?

<div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="fixed"> one</div> <!-- Indicators --> <ol class="carousel-indicators"> <div class="fixed1"> two</div> Style .fixed1 { color: red; top: 0; left:0; } I like to place fixed1 or fixed div element at the top left of the slideshow. My plan is to put logo there. Currently, fixed1 div displays at the bottom of the show. Fixed div shows on top outside the show. Please advise.

Hello, I have this slideshow. I like to have a div element attached in the slideshow. I do not want the element to slide. How can I keep the element fixed without sliding? Please see this line inside the carousel block. This is the element I like it to be fixed on top of the slideshow. Currently, it shows on the top of the slideshow. <div class="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div> <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div> <div class="item active"> <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> Thanks!

Hello, I have a paragraph needs to have Dark Green STENCIL FONT. I have been looking all over but could not find any styling for this. I also do not know it supposed to look like. Can you please recommend a font style for Dark Green STENCIL FONT? Thanks!

Hello, I have FAQ section where questions and answers are collapsible and expandable. I have this css to put an up and down error next to question. I can see the arrow just fine on laptop. I also see it when I inspect in chrome. But when I see it in mobile phone, arrow gets changed to square or different look. If I change the font-family, I do not see arrow any more. Instead, I see different icons depending on the font family. So how can I fix the css so it will show up and down arrow in each device? .accordion-section .panel-default .panel-title a:after { font-family: 'FontAwesome'; font-style: normal; font-size: 3rem; content: "\f106"; color: #1f7de2; float: right; margin-top: -12px; } Thanks!

Hello, Thank you again for the code. I learned a lot from it. However, I got another code that is closer to my requirements as my requirements have changed quite a bit. Please kindly look at the requirements. 1. Cash reward should be 5% of the cash value. 2. Min cash reward should be 250. and Max cash reward would be 6000. 3. It requires fast increment. Max number should be displayed in less than 5 seconds. As soon as people start typing, it should increment to min amount of $250. 4. Calculation should always start from the previously calculated cash reward amount. It should increment and decrement. You can decide what number it should increment or decrement by. If cash reward is less than the calculated reward, it should decrement. If cash reward is more than the calculated reward, then it should increment from the cash reward amount. In other words, it should not always calculate from 0. 5. Cash reward amount should display in this $11,111 format. I spent good two days already. I kind of did requirements 1, 2, and 3. I just modified the existing code by adding variables and if-else statements. Even if code are not good enough, at least 1,2, and 3 work for me. I am not sure how to do requirement no 4. If you could help me with the code, it will be very good. <p><input id="source" placeholder="Sale Price" type="text" /></p> <p>= $<span id="result">0</span></p> <script> document.addEventListener('DOMContentLoaded', function(e) { const persent = 5; const delay = 0; const max = 6000; const min = 250; let tempRes2 = 2; let tempRes = 0; const source = document.querySelector('#source'); const result = document.querySelector('#result'); window.timerId; function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } const typeHandler = function(e) { if (typeof window.timerId !== 'undefined') { clearInterval(window.timerId); } let value = e.target.value; if (!isNumber(value)) { result.innerHTML = 0; return; } const persentage = Math.round(value*persent/100); dividePer = Math.round(persentage /2); let i = 0; window.timerId = setTimeout(function drawDigit() { if (i < persentage) { tempRes = ++i; if (persentage < min) { result.innerHTML = min; }else if (persentage > max ){ window.timerId = setTimeout(drawDigit, delay); result.innerHTML = max ; } else { window.timerId = setTimeout(drawDigit, delay); tempRes2 = i*7+110; if (tempRes2 < persentage) { result.innerHTML = tempRes2; } else { result.innerHTML = persentage; } } } }, delay); } source.addEventListener('input', typeHandler); }); </script> Thanks!

This is awesome. Thanks as always. I will explore this and will get back to you if I have any questions.

I have been searching all over but could not find a thing specific. Can you help me with some code?

Hello, I am very new to javascript and jquery. I like to have a text field where I can enter a dollar value and then system should generate 10% and display the number as it is calculating on my website. I am not sure how to do that and what language to use. Sample is on this page Cash reward section. Thank you!

Thank you! I will play with that tonight.

Thanks for your reply but it is confusing. If you could help me with some coding, it will be great.

Hello, HTML: <section id="block-situations"> <h2 class="block-title">Need to Sell Your House</h2> <div class="field field--name-body"> <div class="padd"> <ul class="eclipse-list"><li>Single family house</li> <li>Mult-units</li> <li>Town homes</li> </ul> </div> </div> </section> CSS: #block-situations { background-image: url(home-for-cash.png); background-repeat: no-repeat; background-size: cover; opacity: .5; } I like to apply opacity to #block-situations only. It works. But the problem is that eclipse.list class contents grayed out. That means once I have the opacity, .eclipse-list contents are not clear. How to apply opacity to parent class without affecting the eclipse-list class contents? Thanks!

<nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="992" class="responsive-menus responsive-menus-0-1-0 absolute responsified"><span class="toggler">☰ </span><ul class="responsive-menus-simple" id="rm-removed"> <li class="first"> <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a> </li> <li> <a href="/how_it_works" data-drupal-link-system-path="node/4">How it works</a> </li> <li> <a href="/about_us" data-drupal-link-system-path="node/6">About Us</a> </li> <li class="last"> <a href="/contact_us" data-drupal-link-system-path="node/5">Contact Us</a> </li> </ul></div> </nav>

Hello, I have this css to style mobile menu bar. I can see it is working in chrome browser toggle device tool bar. But I do not see the color changing in mobile device. Please advise. nav#block-subboottheme-footer .toggler { color: white; }

Complete html for that region: <header class="navbar navbar-default" id="navbar" role="banner"> <div class="navbar-header"> <div class="region region-navigation"> <section id="block-callxs" class="hidden-sm hidden-md hidden-lg col-xs-12 block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix"> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><div class="col-xs-12 cblkbdy"> <div hidden-md="" hidden-lg="" text-center=""> <h2> <span class="glyphicon glyphicon-earphone"></span> 256 - 200 - 9808 </h2> </div> <div class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span><p><span class="callussp hidden-xs">Call Us Now </span> </p><h2> 256 - 200 - 9808</h2> </div> </div></div> </section> <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="992" class="responsive-menus responsive-menus-0-1-0 absolute responsified"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple" id="rm-removed"> <li class="first"> <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a> </li> <li> <a href="/node/4" data-drupal-link-system-path="node/4">How it works</a> </li> <li> <a href="/node/6" data-drupal-link-system-path="node/6">About Us</a> </li> <li class="last"> <a href="/node/5" data-drupal-link-system-path="node/5">Contact Us</a> </li> </ul></div> </nav> </div> </div> </header>

The hidden-sm here means hide it for tablet devices. That is the phone number block. That is the block is fixed positioned. col-xs-12 is for mobile and it is displaying on mobile just fine. So when I place this first block fixed #block-callxs Second block is not visible: <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id"> </div> </nav> I like to place the second block under the first block. Now I only see the first block. I can see both blocks if I remove fixed.

Hello, I have a heading tag: <h1> We buy cars city</h1> I like to break it as "we buy cars" (one line) and then "city" goes to second line. I can not break it in html. How to break it in two lines and then center the both lines? Thank you!

HTML: <div class="region region-navigation"> <section data-quickedit-entity-id="block_content/14" id="block-callxs" class="hidden-sm hidden-lg col-xs-12 contextual-region block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix" data-quickedit-entity-instance-id="0"> </section> <nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region"> <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2> <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id"> </div> </nav> </div> For mobile CSS: #block-callxs{ background: blue; color: white; text-align: center; position: fixed; z-index:99; } When I visit the mobile page, I see the position fixed but the responsive-menus block not visible. How to display the responsive menus below the callxs block? Thanks

Hello, I like to apply css to all anchor texts regardless how the a links are coded. I put that code and I notice that css does not apply to all anchors. /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } Below shows two examples how anchors look like on the page: <nav class="toolbar-lining clearfix" role="navigation" aria-label="Administration menu"> <h3 class="toolbar-tray-name visually-hidden">Administration menu</h3> <div class="toolbar-menu-administration"><ul class="toolbar-menu"> <li class="menu-item menu-item--collapsed"><a href="/admin/content" title="Find and manage content." id="toolbar-link-system-admin_content" class="toolbar-icon toolbar-icon-system-admin-content" data-drupal-link-system-path="admin/content">Content</a></li> <li class="menu-item menu-item--collapsed"><a href="/admin/structure" title="Administer blocks, content types, menus, etc." id="toolbar-link-system-admin_structure" class="toolbar-icon toolbar-icon-system-admin-structure" data-drupal-link-system-path="admin/structure">Structure</a></li> </div></div></nav> <ul class="menu menu--main nav navbar-nav responsive-menus-simple" id="rm-no-id"> <li class="first"> <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a> </li> <li> <a href="/node/4" data-drupal-link-system-path="node/4">How it works</a> </li> <li> <a href="/node/6" data-drupal-link-system-path="node/6">About Us</a> </li> <li class="last"> <a href="/node/5" data-drupal-link-system-path="node/5">Contact Us</a> </li> </ul> These anchors show different ways in different places like blocks, sections, views, menu, etc. Regardless, how these are coded, how to apply the above styling? Currently, it works for some and does not work for others. Thank you!

Hello, I am trying to create a block as per the design I attached here. This is the link I am playing around here but I could not do it. I was wondering if you could help me providing me the complete html using the bootstrap theme, I would really appreciate. Thanks.

Thank you.

Hello, HTML: <div class="carousel-inner"> <div class="item active"> <img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="1.jpg"> <div class="carousel-caption"> <h4> <a href="http://drupal-8-6-5.dd:8083/node/11">Slide 1</a></h4> <p>teaser 1... </p> </div> </div> <div class="item "> <img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="2.jpg"> <div class="carousel-caption"> <h4> <a href="http://drupal-8-6-5.dd:8083/node/11">Slide 2</a></h4> <p>teaser 2... </p> </div> </div> </div> I would like to place text inside first carousel-caption to left and place text inside second carousel-caption to the right. I have done the following but it is not working. CSS: .carousel-caption:nth-child(1) {text-align:left;} .carousel-caption:nth-child(2) {text-align:right;} Please advise.

Thanks.