Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by newcoder1010

  1. 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.
  2. 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.
  3. 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?
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Unfortunately I am not able to remove the classes and add a new class. How can I overwrite?
  9. 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?
  10. Hello, How can I edit my old post? I do not see any edit option to edit an old post? Thanks.
  11. Max height fixed it. I spent hours for that. Thanks.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. Thanks. I will use both options depending on site.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. Thank you. Above code what I needed.
  22. Never mind. I removed some code and now it is working. Thanks.
  • Create New...