newcoder1010

When I inspect, I clicked "#views_slideshow_cycle_div_slideshowv-block_2" which showed me below css. I changed none to block. I still have the same issue. Can you please help? element.style { position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; }

My slideshow block: #block-views-slideshowv-block Parent class: Very-Top2 Parent css: .Very-Top2 { display: block; margin-bottom: 10px;} I do not see fixed width for the above parent. I have spent whole lot of time. If you could please, help me with the css code. It seems to me entire site is responsive except the slideshow. Slideshow is also responsive except the height.

I am sorry. I am not able to understand you. My custom css file looks like this CSS CODE CSS CODE @media (min-width: 992px) { CSS CODE } @media only screen and (max-width: 768px){ CSS CODE } @media (min-width: 768px) and (max-width: 992px){ CSS CODE } If I choose the 2nd option "force a reload of page, styled with css, media queries should adjust if media size range allowed for that specific width." Are you saying I should write some code in my css file? Can you please clarify?

Hi, I am using drupal7/bootstrap. When I visit the page (mainly home) in laptop or desktop, page looks responsive. When I resize the screen. Page is not being responsive automatically. I have to refresh the page manually to see the responsive page. Please advise. http://webuyhousesinnova.com/

.coaching-program li { list-style-type: disc; list-style-position: inside; text-indent: 0; padding-left: 1em;} I tried with text indent 0. I did lot of google I can not fix the problem. Some browsers/devices show first and 2nd line aligned correctly some don't. Can you please help me with the code? Should I also rewrite the html?

That's correct. When I had min height, it is overlapping on the next region. I removed min height, it is not overlapping. When i resize the screen on desktop, Page is not being refreshed/responsive automatically. Is there any reason for that? Overall, images look better. If I can do anything more to improve, please let me know. Thanks much.

First I opened each image in paint and resized the image to 1350x550. Modified my code as below. Is this what you are asking? .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { width: 100% !important; min-height: 550px; } .view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img { margin-top: 50px;min-height: 550px; margin-left: auto; margin-right: auto;margin:0px; width: 100% !important; }

I just removed 100% and images are not full width of the screen. I guess I am confused here. How can I make the images full width of the screen by keeping the same height? or I should not use height? If I keep 100% width but no height, images are better but heights are not same for all images. If I dont have any width plus fixed height, images are not full width of the screen but the same height for all. Please advise.

Hello, I have used the below code for responsive images. Slideshow takes the full width of the screen. I have visited different browsers. First image in the slideshow is giving me hard time. It stretches out and make the first image look really bad in different browsers. If you please visit my page and help me to fix the issue for the first image. My link webuyhousesinnova.com. I like my images to be 700px height in the slideshow. I created each image with the same height(700px) first manually and then uploaded the images. Last 2 images are ok but the first one stretches bad... .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { height: 700px !important; min-height: 700px; width: 100% !important; } .view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img { height: 700px; min-height: 700px; width: 100%; margin-top: 50px; margin-left: auto; margin-right: auto;margin:0px; }

I am sorry. I am not able to understand your recommendations. Are you saying text-indent should be 0? Then use padding? What should be value of padding? Any sample code please?

I tried this and it looks lot better but I still have some indent issues in different browsers, specially for mobile versions. Some devices show the 2nd line is being more indented than the first line. Please advise. Attached image. .coaching-program li { list-style-type: disc; list-style-position: inside; text-indent: -1.5em; padding-left: 1em;}

Hi, I have this html: <li >llllllllll</li> <li >llllllllll</li> <li >llllllllll</li> <li >llllllllll</li> I would like to align li to left. When I align using below code, bullets and texts both align to left for 2nd line. If the bullet point requires a second line, how to have it aligned with the text above and not the actual bullet. Please see the image. Can you please help? .coaching-program li { bottom: 5px; text-align: left; }

Numbers were overlapping. When I change the color to match background, font colors are overlapping to outside the circle. I used this and it is better? color: transparent;

Thank you. Now, how do I remove the numbers?

I tried the below code. I think something is overwriting. I am getting the partial results. Two main issues: not being circled and not having the blue color. #block-views-testimonial-slideshows-block-1 .pagination li { float: left; margin: 25px; width: 10px; height: 10px; /* if i remove this, still same result */ border-radius: 5px; /* if i remove this, still same result */ font-size: 20px; line-height: 100px; text-align: center; background: blue; /* not getting blue */ } Below is working. #block-views-testimonial-slideshows-block-1 .pagination span{ background: red; } Please see the image.

Hello, I have this pagination: <ul class="pagination"> <li class="active"><span>1</span></li> <li><a title="Go to page 2" href="/?q=home&page=1">2</a></li> <li><a title="Go to page 3" href="/?q=home&page=2">3</a></li> </ul> When active, I would like to make the color circled plus red. When not active, i would like to make the color circled plus blue. I have tried several different ways but I could not do it. Can you please help me with the css? Thanks.

Hello, I would like to add inline blockquote before and after the paragraph below. #block-views-testimonial-slideshows-block-1 .views-field-body p{ border: none; margin: 0 auto 0; float: left; background: transparent !important; font-style: normal; font-size: 22px; line-height: 1.5; position: relative; } I wrote the below css and it is not writing the double quotes: #block-views-testimonial-slideshows-block-1 .views-field-body p:before { position: absolute; width: 60px; height: 60px; font-size: 120px; line-height: 1; } #block-views-testimonial-slideshows-block-1 .views-field-body p:after { position: absolute; width: 60px; height: 60px; font-size: 120px; line-height: 1; } Can you please help?

Any help please?

Hi, I have the img and menu under the parent id navbar. I would like to bring the menu class little bit up without resizing the image. I have been playing with it. I can do that but img is being resized. If you please visit my page and help me bring the menu class about 50px up without resizing the navbar and img classes. That means navbar and img are fine. Just want to bring the menu up. You will see menu class is at the bottom of the class nabvar. webuyhousesinnova.com Thanks. <header id="navbar" class="navbar container-fluid navbar-default"> <div class="container1"> <div class="navbar-header col-xs-12"> <a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="/" title="Home"> <img src="http://webuyhousesinnova.com/sites/default/files/aa.png" class="img-responsive" alt="Home"> </a> <a class="name navbar-brand" href="/" title="Home">Platinum Mentoring</a> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> </div> <div class="navbar-collapse collapse"> <nav> <ul class="menu nav navbar-nav"><li class="first leaf active-trail active"><a href="/?q=home" class="active-trail active">Home</a></li> <li class="leaf"><a href="/?q=coaching">Coaching</a></li> </ul> </nav> </div> </div> </header>

Thank you so much for your advise.

I used this and worked. .page-node-150 .field-item.even{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .field-item iframe{ left:0; top:0; height:500px; width:100%; position:absolute; }

Hello, I have this html. <div class="field-item even"> <iframe width="" height="" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?hl=e14&t=m&output=embed"></iframe> </div> I would like to make the iframe 80% of any screen. I tried below and did not work. .iframe { width:90%; // i also tried width:90vw; height:500px; margin-left;:auto; margin-right:auto } Please advise.

Are you saying this? { display: flex; margin-top: 100px; flex-direction: column-reverse;} it took both classes down...

Hi, I have this html: <table class="socialmedia"> <tbody><tr><td class="facebbok"> <a href="https://www.facebook.com/" target="_blank" title="Facebook"> f</a> </td> <td class="twitter"> <a href="https://twitter.com" target="_blank" title="Twitter">t</a> </td> </tr></tbody></table> I like to put f and t in circled and then centered. I got the circle but it is not putting in the center. Please advise. td.facebbok a { float: left; padding: 5px; /* margin: 5px; */ width: 40px; height: 40px; border-radius: 50px; font-size: 20px; line-height: 100px; text-align: center; background: #34289c; }

Hi, I have this html: <section id = "block-webform-client-block-132"> <div class = "aa"> ....... </div> <div class = "bb"> ....... </div> </section> I simply like to keep bb class same place. I only like to bring the aa class down. So it means, it will show bb first and then aa below bb. I used this css: This bring both down. Can you please help? .aa {margin-top:20px;}