Home Forums Porto Template Call to action box content not re-sizing

This topic contains 4 replies, has 2 voices, and was last updated by  MoiraAllen 2 months, 1 week ago. This post has been viewed 92 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10028560

    MoiraAllen
    Participant

    Hi Rodrigo – I am having issues with the content inside the “call to action boxes”. The box itself re-sizes but the content does not. if you look on my index page you will see what I mean.

    Go to: timezonemedia.com/bse-preview
    logins: visitor
    QTRB33CCmeThee!

    Then you can have a look and see what is wrong. Thanks. Moira


    #10028568

    Support2
    Keymaster

    Hello Moira,

    You need add the class img-fluid in all images inside call to action boxes.

    For example:

    <img src="img/bbb-cfib.jpg" alt="xxxxxxx" class="img-fluid">

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10028578

    MoiraAllen
    Participant

    Thanks, Rodrigo. I tried that but it made the images really small. I added the width and height to see if that would make the images appear correctly but that had no effect. I have uploaded a page called test.html that you can look at. What else can you suggest?
    Moira


    #10028585

    Support2
    Keymaster

    Hello Moira,

    Always use the img-fluid for responsive images.

    In that case you need change your HTML structure based on bootstrap grid system, changing the columns sizes for each resolution. For example the section with 3 images:

    <section class="call-to-action featured featured-primary mt-4 mb-5">
    	<div class="row px-3">
    		<div class="col-12 col-lg-7 call-to-action-content">
    			<h3> <strong>BSE Enterprises</strong> the reliable, basement solutions experts for foundations in the greater Moncton, New Brunswick, area.</h3>
    			<p class="mb-0">Proud members of the Better Business Bureau and CFIB</p>
    			<br>
    			<br>
    			<img src="img/bbb-cfib.jpg" alt="Better Business Bureau Canadian Fderation of Independent Business" class="img-fluid">
    		</div>
    		<div class="col-12 col-lg-5 mt-4 mt-lg-0">
    			<img src="img/steve-jordan-owner.jpg" alt="Steve Jordan" class="img-fluid">
    		</div>
    	</div>
            
    	<div class="row px-3">
    		<div class="col-sm-12 col-lg-12">
    			<p class="mt-4"><i>
    "BSE Enterprises is locally owned and delivers service you can trust. I am proud to say our staff is trustworthy and trained to treat your home with the utmost respect. We offer FREE estimates, guarantee our 
    workmanship, and are fully insured and covered by WorksafeNB." </i> &nbsp;&nbsp;&nbsp;Steve Jordan, Owner of BSE Enterprises</p>
    		</div>
    	</div>
    </section>

    Hope it helps and clarify about responsive images.

    Kind Regards,

    Rodrigo.


    #10028599

    MoiraAllen
    Participant

    Thanks, Rodrigo. With your I managed to get the pics to re-size.


Viewing 5 posts - 1 through 5 (of 5 total)