newcoder1010

Hello, Inspected my site in chrome. Selected this link: <form class="form-view theme7" id="agile-form" action="" style="max-width:450px;" method="GET"> I see this css: element.style {max-width:450px;} .form-view { font-family: Tahoma,Geneva,sans-serif; width: 100%; background: #fff; font-size: 14px; padding: 10px; } Now form shows 450px width. I would like the form to be 100% width. How to make the form 100% width?

Hello, I see a space to the right of mobile menu bars. I just cant fix it. How can I remove the space to the right of mobile menu? If you could see the link for an image, it might help you to understand my problem. <div data-mediasize="992" class="responsive-menus responsive-menus-0-1 absolute responsified"> <span class="toggler">☰ </span> <section id="rm-removed" class="responsive-menus-simple"> <ul class="rm-removed" id="rm-removed"> </ul> </section></div> .responsive-menus.responsified { margin-top: 130px; margin-right: 0; margin-left: 0; padding: 0; } .responsive-menus.responsified { clear: both; width: 100%; } https://drive.google.com/open?id=1CuZEdWwRkg1tAFR9HQTGZdali3RtYlYG Thanks.

Thanks.

Sorry did not see @dsonesuk post. I tried this and worked. .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; text-align: center; display: block; float: none !important; } Thanks.

I tried this but no luck. .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; text-align: center; } .pull-left { float: none !important; } Please advise.

Hello, HTML: <a class="logo navbar-btn pull-left" href="/" title="Home"> <img src="/sites/default/files/mmmo_0.jpg" alt="Home"> </a> My CSS .logo {text-align:center;} Currently, image is floated to left I guess because of bootstrap default pull-left class. When I click on a class in chrome inspect, I get this css: .navbar .logo { margin-right: -15px; padding-left: 15px; padding-right: 15px; } .pull-left { float: left !important; } I wont be able to change any html classes. How can I place the logo in the center of logo class? Thanks.

Unfortunately I am not able to remove the classes and add a new class. How can I overwrite?

Hello, HTML: <ul class="menu nav"> <li class="first leaf active-trail visited active"><a href="</a></li> <li class="leaf"><a href="</a></li> </ul> CSS from bootstrap cdn has this: .nav { list-style: none; } ul li.collapsed, ul li.expanded, ul li.leaf { list-style: none; } How to overwrite to display the bullets next to list item?

Hello, How can I edit my old post? I do not see any edit option to edit an old post? Thanks.

Max height fixed it. I spent hours for that. Thanks.

Hello, I spent hours to fix it but no luck. I created slideshow using carousel. Original size of each image is 1500x650px. CSS to parent class and slideshow images. .front .carousel-inner { position: relative; width: 100%; overflow: hidden; height: 550px; } .front .view-sliders img { width: 100%; } When I visit the site in laptop, it looks ok. As I am making the screen smaller, I see padding between bottom of image and bottom of parent. I can fix the padding by giving height:100% instead of giving height:550px to parent. Problem with that is the image height in laptop looks big. When I get to mobile screen, I have this. I can kind of accept it as is. front .carousel-inner { height: 100%; } At his point, I am asking you to help me fixing it. You can provide any recommendations to make it responsive slideshows. I would like to keep the slideshow images height about 550px by cropping the images. This is my site. If you could visit my site and help me, I would really appreciate it. Thanks.

Hi, I have this code to make the mobile menu (3 bars) to green. .responsive-menus.responsified span.toggler { padding: 0; display: block; color: green; border-radius: 0; background: #fff; box-shadow: 0px 0px 0px #000; font-size: 3.35em; text-align: center; /* cursor: pointer; */ margin: 0; outline: none; /* width: 100px; */ } When I view the page in desktop and then make screen mobile size, I see the mobile menu is green. When I visit the page in mobile phone, bar is kind of black. I am not sure why my phone does not show the color green. How to overwrite to make sure mobile menu bars are green? Thanks.

Hello, HTML: <div class="webform-container-inline webform-datepicker"> <div class="form-item form-item-submitted-personal-information-birth-date-month form-type-select form-group"> <select class="month form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-month" name="submitted[personal_information][birth_date][month]"> <option value="" selected="selected">Month</option> <option value="1">Jan</option> <option value="2">Feb</option> </option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-month">Month</label> </div> <div class="form-item form-item-submitted-personal-information-birth-date-day form-type-select form-group"> <select class="day form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-day" name="submitted[personal_information][birth_date][day]"> <option value="" selected="selected">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-day">Day</label> </div> <div class="form-item form-item-submitted-personal-information-birth-date-year form-type-select form-group"> <select class="year form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-year" name="submitted[personal_information][birth_date][year]"> <option value="" selected="selected">Year</option> <option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option> <option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option> </select> <label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-year">Year</label> </div> </div> Now Month, Day, Year display in a column. How can I display month, day and year in the same row? I tried this and I still see them in a column. select#edit-submitted-personal-information-birth-date-year { width: 33%; float: left; } select#edit-submitted-personal-information-birth-date-day { width: 33%; float: left; } select#edit-submitted-personal-information-birth-date-month { width: 33%; float: left; } Please advise.

I tried so many codes. I made some progress. I applied css to delay the caption. Now I have 400px height to parent. How can I say display only middle portion of the images by cropping 15% top and bottom in all devices without leaving any padding in the parent element? Its ok if people head is cropped. My goal is to learn. After that I can play with that. .page-node-73 .container .carousel-inner { position: relative; width: 100%; overflow: hidden; height: 400px; } I am not able to give background image in html. Only option I have is to use css. This is the page where I am practicing incase if you like to see. Thanks.

Thanks. I will use both options depending on site.

Hi, When I inspect my page in chrome, I see the links shows in different formats. Below are some examples: .nav > li > a .dropdown-menu > .active > a .nav .open > a Regardless how the a links show, I like to apply css to all links. Below css is not working for all the links. My site is a bootstrap theme. Some css is being applied from bootstrap CDN and not reading my css unless I delete bootstrap css. a:link { color: blue; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } a:focus { color: green; } How can I apply css by forcing as : - All links blue color - All links on hover red. - All links on click green - All links when we are on the page color(active page) are yellow. Thank you.

This one worked for me. .player { position: relative; padding-bottom: 35%; padding-top: 35px; height: 0; overflow: hidden; } .player iframe.utube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For mobile, I changed the padding bottom to 55% and for tablet to 45%. Questions: I did not understand the meaning of padding bottom and padding top. What is 16:9 ratio? How do you know the ratio? 16 and 9 are width and height? Thank you.

1. .player { width: 70%; HEIGHT: 0; POSITION: ABSOLUTE; overflow: hidden; padding-bottom: 56.25%; } 2 iframe { /* width: 70%; */ /* height: 100%; */ position: absolute; top: 0; right: 0; left: 0; border: 0; } 3 html looks still same as before. 4. How page looks now. https://drive.google.com/open?id=1O_9oIX2pzk872zkBczEbY4B1RqRTf3zX Its overlapping on another field. If you visit the link, you will notice you tube field is overlapping body field. Also iframe not responsive. Cover page that I am referring to as "when you visit a page you see a video with video cover. cover may show one person and texts. As I am making responsive I want video and video cover to be responsive. Not just the video itself. That means I should see the video cover of person and texts regardless of the screen size. https://drive.google.com/open?id=1l6b1Dglkc5pDVZjOKRycO83OujYBCnqt Thanks.

Hello, I would like to place the video 70% width of the screen and height should be adjusted by itself based on the screen size. HTML: <div class="field field-name-field-youtube field-type-video-embed-field field-label-above"> <div class="field-label">Youtube 1: </div> <div class="field-items"> <div class="field-item even"> <div class="embedded-video"> <div class="player"> <iframe class="utube" src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe> </div> </div> </div> </div> </div> CSS: iframe.utube { width: 100%; } Now it is taking entire computer screen. I changed from 100% to 70%. Desktop shows the entire video. But as I am making responsive, video is being responsive but cover page starts cropping. That means video shows 70% and cover page shows part of the cover page. How can I make it 70% width by a responsive height (please recommend) without cropping the cover page content? Thanks.

Thank you. Above code what I needed.

Never mind. I removed some code and now it is working. Thanks.

Hello, I created a slideshow in carousel and I had white color arrows of prev and next buttons. I applied some css animation and now the arrows are gone. Instead, I see white color square. Below is the css: .carousel-control.left { left: 22px; opacity: 1; } css_injector_4.css?p4k674:194 .carousel-control.left, .carousel-control.right { position: absolute; z-index: 100; top: 50%; margin-top: -30px; opacity: 0; color: #fff; font-size: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-shadow: none; width: 30px; height: 30px; } css_injector_4.css?p4k674:183 .carousel-control.left { left: -22px; } bootstrap.css? [sm]:6306 .carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } opacity.less:7 .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0); filter: alpha(opacity=50); opacity: .5; } Image to see the page in chrome inspect: https://drive.google.com/open?id=1U0G2BXb1kDOvQIM-x_Zk67VLY-CXyebO Please advise.

Hello, My script reads some data from excel cell. Sometimes excel cell has empty but variable returns 0. I am not sure why. Use case: - read data from excel cell. - If cell is empty, null, or 0, then assign "baddata" value to variable "Cellvalue" - If cellvalue NOT EQUAL TO "baddata" then print "good data" String zip2Value; String cellvalue; if (zip2Col == null) OR (zip2Col == 0) { cellvalue = "baddata";} } if (cellvalue != "baddata") { System.out.println("good data "); } Is it correct way of writing it?

I tried to inspect the other site in chrome and I got lost. Will that be possible for you to provide me some styling help with css only? Anything will help.

Hello, I created bootstrap carousel slideshow. It is working fine. Images I have are like 1000x700. In the slideshow, images look big as expected but do not look good. I like to apply some styling to these images but I failed to do it. I spent about 3 days but failed to figure it out. This site also has images bigger than actual slides. I am not sure how to apply css to the images and wrapper class so images look more professional. Below is the html code: <div class="view view-views-slideshow-home-page slideshow"> <div class="view-content"> <div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li> <li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"> <img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt=""> </div> <div class="item active"> <img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt=""> </div> </div> <!-- Carousel navigation --> <a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next"> <span class="icon-next"></span> </a> </div> </div> </div> CSS: .slideshow{ padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .slideshow img{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; } Its not doing anything. My slide images taking over entire screen. I am not sure how to apply css so part of the images show in the slides instead of the entire image. Please advise how I can fix it. Thanks.