I'm trying to have a Bootstrap section that's 1/2 UL & 1/2 image. The code works fine at full screen, but when I start reducing the size of the screen the image begins to shrink & show the section's background (see images). hot can I go about having the image always remain full cover in 1/2 of the section until it reaches the break point # small width? Thanks for any help you can give!!
Full Screen works fine | Image begins to "break" around medium | Works fine again at small screen
<section class="bg-primary-cut" id="cuts">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<h2 class="section-heading-cuts text-uppercase">Pup List</h2>
<hr class="light">
<ul class="ul-cuts">
<li>Short one </li>
<li>Short one </li>
<li>a little bit longer one </li>
<li>short one </li>
<li>also a tad bit longer </li>
<li>last shortie </li>
</ul>
</div>
<div class="col-lg-6">
<img class="media-object img-responsive" src="https://unsplash.it/1200/600?image=1062" height="500">
</div>
</div>
</div>
</section>
Set the height of the image to 100% so it will fill. Although it may skew it out of proportion.
OR you can see at which point it starts to break and set different styles for that breakpoint with media queries to override bootstraps sm/md/lg breakpoints.
Related
In this Scrollify Demo content height is greater than section height generated by default. Each Section has different height. Same scenario is with my code. I have a section with large amount of content. I have put this content class in interstitialSection. But that section is not behaving like demo.
<section class="features panel1 job-section">
<div class="container-fluid no-padding">
<div class="col-lg-12 col-md-12 col-sm-12 col-x-s-12">
<h1 class="career-color">Career Opportunities at TSR Darashaw</h1>
<p class="career-desc">Be a part of TSRDL Family and embark upon the path of Growth, Excellence and Success. We strive to create a cohesive Family of competent team-mates inspired to serve our prestigious clientele.</p>
<h3 class="career-color current-title">Current Openings</h3>
<div CLASS="job">
<h4 class="career-color">Associate - Payroll</h4>
<ul class="job-details">
<li><span>EXPERIENCE: </span><span>2-5 years</span></li>
<li><span>Location:</span><span>Mumbai - Mahalakshmi</span></li>
<li><span>JOB CODE:</span><span>AP001</span></li>
</ul>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<i class="icon-plus"></i>
<p class="show-details">SHOW DETAILS</p> <button class="apply">APPLY NOW</button>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4 class="career-color job-desc-title">JOB DESCRIPTION</h4>
<ul class="faq-points">
<li><span></span><p>Validity of the executed instrument of transfer</p>
<ul class="sub-points">
<li><span></span><p>for shares :- 60 days from the date of execution</p></li>
<li><span></span><p>for debentures :- for an indefinite period</p></li>
</ul>
</li>
<li><span></span><p>SEBI has notified vide its Circular No. MRD/DoP/Cir-05/2009 dated 20th May,2009 that it is mandatory for all transactions in the securities market including transfer of shares in physical form of listed Companies to be accompanied with copies of PAN Cards of ALL the transferees.</p></li>
<li><span></span><p>Further as per SEBI (Listing Obligations And Disclosure Requirements) Regulations 2015, both transferor and transferee are to furnish copy of PAN for transfer of securities.</p></li>
<li><span></span><p>Please therefore attach self attested copies of PAN Cards of both the transferee(s) and transferor(s) alongwith the instrument of transfer</p></li>
<li><span></span><p>Keep photocopies of certificates, instrument of transfer and other documents sent by post to TSRDL. In case of a loss in transit, they come in handy.</p></li>
</ul>
<h4 class="career-color job-desc-title">Profile requirements</h4>
<ul class="faq-points">
<li><span></span><p>Validity of the executed instrument of transfer</p>
<ul class="sub-points">
<li><span></span><p>for shares :- 60 days from the date of execution</p></li>
<li><span></span><p>for debentures :- for an indefinite period</p></li>
</ul>
</li>
<li><span></span><p>SEBI has notified vide its Circular No. MRD/DoP/Cir-05/2009 dated 20th May,2009 that it is mandatory for all transactions in the securities market including transfer of shares in physical form of listed Companies to be accompanied with copies of PAN Cards of ALL the transferees.</p></li>
<li><span></span><p>Further as per SEBI (Listing Obligations And Disclosure Requirements) Regulations 2015, both transferor and transferee are to furnish copy of PAN for transfer of securities.</p></li>
<li><span></span><p>Please therefore attach self attested copies of PAN Cards of both the transferee(s) and transferor(s) alongwith the instrument of transfer</p></li>
<li><span></span><p>Keep photocopies of certificates, instrument of transfer and other documents sent by post to TSRDL. In case of a loss in transit, they come in handy.</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery(function($) {
$(function() {
$.scrollify({
section:".panel1",
scrollSpeed:1100,
interstitialSection : ".job-section",
easing: "easeOutExpo",
overflowScroll: true,
scrollbars: true,
touchScroll:true,
updateHash: false,
offset : 0
});
});
});
Scroll in demo is smooth for option section till next section. But whenever i have scrolled in my code, control goes directly to the next section.
How can i achieve this same as demo.
Remove the job-section class from your section.
I am trying to get the error message off of a page from a site. The list contains several possible errors so i can't check by id; but I do know that the one with display:list-item is the one I want. This is my rule but doesn't seem to work, what is wrong with it? What I want returned is the error text in the element.
//*[#id='errors']/ul/li[contains(#style,'display:list-item')]
Example dom elements:
<div id="errors" class="some class" style="display: block;">
<div class="some other class"></div>
<div class="some other class 2">
<span class="displayError">Please correct the errors listed in red below:</span>
<ul>
<li style="display:none;" id="invalidId">Enter a valid id</li>
<li style="display:list-item;" id="genericError">Something bad happened</li>
<li style="display:none;" id="somethingBlah" ............ </li>
....
</ul>
</div>
The correct XPath should be:
//*[#id='errors']//ul/li[contains(#style,'display:list-item')]
After //*[#id='errors'] you need an extra /, because <ul> is not directly beneath it. Using // again scans all underlying elements for <ul>.
If you are capable to not use // it would be better and faster and less consuming.
I have this image http://s23.postimg.org/on361znhn/Transform_Marketing.png
and I want to put 3 colored and centered (learn more) texts under each image. I tried this:
<p>
<span style="float:left;margin-left:100px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:170px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:120px;margin-right:40px"> Learn More</span>
</p>
but the link is not working. I want an option to change (learn more) text colour and font size and have it centered under each image.
Thank you for help.
to center each text below its image, the below code should help:
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img1.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img2.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img3.png"><br />learn more
</div>
Hope it helps.
Update (in case only one image):
You have to know the image width, adjust the text positions below the image using photoshop (you should use the same font & size you are using on the website).
Adjust the margins of your spans to center the text manually.
I want to count the images displayed in a page using capybara.The html code displayed below.for that i use following code to return the total count but the count returns 0.In my page i have 100 more images.
c= page.all('.thumbnail_select').count
puts c(returns 0)
HTML
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon_img"></span></span>
</a>
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test1.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon1_img"></span></span>
</a>
.........
.........
How can i count the total images?
You have a few options.
Either find all div's with class thumbnail_select by using all("div[class='thumbnail_select']").count
But this is an awkward way of doing it since it looks for the div and not the images.
A better way would to be to look for all images using all("img").count as long as no other image is present on the page.
If neither of these works either the problem might be that your page is not loaded when you start looking for the images. Then just simply put a page.should have_content check before the image count to make sure that the page is loaded.
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/