I am trying to work out how to display image heights differently, depending on the screen size the website is viewed on. There are blocks of image and text that sit side by side and are set to appear at a common height at desktop. However at mobile size when elements are stacked I no longer need the common height command to apply. I just need to make sure all the text displays and that the image displays full width, any height. (I no longer need the heights of adjacent blocks to balance at mobile).
I think the common-height command is a js command...
maxHeight: function(){
if( $commonHeightEl.length > 0 ) {
if( $commonHeightEl.hasClass('customjs') ) { return true; }
$commonHeightEl.each( function(){
var element = $(this);
if( element.find('mon-height').length > 0 ) {
SEMICOLON.initializemonHeight( element.find('mon-height:not(.customjs)') );
}
SEMICOLON.initializemonHeight( element );
});
}
},
var $counterEl = $('.counter:not(.counter-instant)');
if( $counterEl.length > 0 ){
$counterEl.each(function(){
var element = $(this);
var counterElementComma = $(this).find('span').attr('data-comma');
if( !counterElementComma ) { counterElementComma = false; } else { counterElementComma = true; }
if( $body.hasClass('device-xl') || $body.hasClass('device-lg') ){
element.appear( function(){
SEMICOLON.widget.runCounter( element, counterElementComma );
if( element.parents('mon-height') ) {
SEMICOLON.initialize.maxHeight();
}
},{accX: 0, accY: -120},'easeInCubic');
} else {
SEMICOLON.widget.runCounter( element, counterElementComma );
}
});
}
},
$commonHeightEl = $('mon-height'),
<div class="row our-services common-height no-gutters">
<div class="col-md-6 dark ohidden order-2 order-md-1">
<div class="h-100" style="background: url(images/our-services-01.jpg) center center / cover no-repeat;">
</div>
</div>
<div class="col-md-6 dark ohidden order-1 order-md-2">
<div class="pb-md-5 h-100" style="background-color: #ce5b28;">
<h3 class="uppercase" style="font-weight: 400;">RESIDENTIAL PROJECTS</h3>
<p>Families grow and lifestyles change and with it the demand for more space for playrooms, larger eat-in kitchens and bedrooms with en-suites and walk-in wardrobes. We offer a high quality construction service in loft conversions and extensions and have formed strong alliances with architects, surveyors, structural engineers and trade specialists.<br><br>
<span class="font-italic">“Heyland & Spratt have steered us through a complex refurbishment and extension project on our house in Camberley. From day one dealing with council bureaucracy to moving in. Throughout he kept us informed and at peace! We are delighted with our new home.”</span>
<br>Surita and Gavin, Camberley</p>
<h3 class="uppercase" style="font-weight: 400;">BUY TO LET LANDLORDS</h3>
<p>Heyland & Spratt Ltd works closely with various London Lettings Agents and private landlords to ensure their property management and maintenance requirements are met quickly, efficiently and on budget.<br><br>
<span class="font-italic">“I have always found Heyland & Spratt to be helpful and reliable - their work is completed to a high standard for both large scale projects and smaller general maintenance jobs.”</span><br>Alex, West London Lettings Manager<br><br>
<a href="pdfs/HS-Planned-Maintenance-Services.pdf" target="_blank" class="button-white button-rounded">Download our Brochure</a><br><br>
<strong>WORKING WITH:</strong><br>
<img src="images/savills-white.png" width="95" height="70" alt="Savills"><img src="images/hamptons-white.png" width="152" height="70" alt="Hamptons"><img src="images/knight-frank-white.png" width="154" height="70" alt="Knight Frank"><img src="images/marsh-white.png" width="106" height="70" alt="Marsh"></p>
</div>
</div>
<div class="col-md-6 dark ohidden ohidden order-3">
<div class="pb-md-5" style="background-color: #152c53;">
<h3 class="uppercase" style="font-weight: 400;">COMMERCIAL WORK</h3>
<br><p>Our commercial and corporate clients demand a straight talking approach, tight time lines and a thorough Health and Safety policy. We specialise in working on building and refurbishing children’s nurseries and schools. We have carried out work in numerous shop fronts, children’s nurseries, Heathrow and City Airports and London’s famous Gherkin Building.<br><br>
Each assignment comes with a dedicated Site Manager from start to finish. Our core team of reliable sub-contractors, specialists and consultants, together with a long-standing trusted workforce, ensures that we always deliver practical, skilled and resourceful solutions.<br><br>
<span class="font-italic">“Our company has been using Heyland and Spratt for some years now and within that time they have carried out large refurbishment projects within our nurseries. Every time we have found them to be very professional in their approach to the projects and always with the wellbeing of the children in our nurseries in mind, both during the project and also in the finished work so to enhance the safety of the children and staff within the nursery.”</span><br><br>Nationwide Group of Children’s Nurseries<br><br>
<a href="pdfs/HS-Commercial-Education-Projects.pdf" target="_blank" class="button-green-02 button-rounded">Download our Brochure</a><br><br>
<strong>WORKING WITH:</strong><br><br>
<img src="images/bright-horizons.png" width="152" height="70" alt="Bright Horizons"><img src="images/kedlestone-group.png" width="154" height="70" alt="Kedlestone Group"><img src="images/cadogan.png" width="115" height="70" alt="Cadogan"><img src="images/graphica-display.png" width="97" height="70" alt="Graphica Display"></p>
</div>
</div>
<div class="col-md-6 dark ohidden order-4">
<div class="h-100" style="background: url(images/our-services-02.jpg) center center / cover no-repeat;">
</div>
</div>
<div class="col-md-6 dark ohidden order-6 order-md-5">
<div class="h-100" style="background: url(images/our-services-03.jpg) center center / cover no-repeat;">
<a name="commercial-work"></a>
</div>
</div>
<div class="col-md-6 dark ohidden order-5 order-md-6">
<div class="pb-md-5 h-100" style="background-color: #bdc736;">
<h3 class="uppercase" style="font-weight: 400; color: #002a53;">BESPOKE JOINERY WORKSHOP</h3>
<br><p class="bluetext">Our bespoke joinery workshop specializes in creating custom woodwork solutions for both the commercial and residential sectors. Working directly with the client and cutting out subcontractor means ensures a faster turnaround time, greater efficiency, and significant cost savings for our clients. <br><br>With a focus on craftsmanship and attention to detail, we design and build high-quality, tailored joinery that meets the unique needs of each project. Whether you’re outfitting a commercial space or enhancing a residential property, our skilled team delivers innovative, functional, and beautiful woodwork that elevates any environment.
</p> </div>
</div>
</div>
I wonder how to add to this command to do something different at mobile size? Or is there a better way to do that which doesn't involve js, perhaps just CSS. Basically to avoid doing weird image crops at mobile size.