Image 32 pixels wide in a paragraph of a BootStrap4 Carousel slide

I’m trying to display an image 32 pixels wide in a paragraph of a BootStrap4 Carousel slide… I can get the icon left center or right… but I’d like it to be on the same line right next to the text, before “How much…”

<!-- Third slide -->
            <div class="carousel-item view hm-black-light" style="background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(97).jpg'); background-repeat: no-repeat; background-size: cover;">

                <!-- Caption -->
                <div class="full-bg-img flex-center white-text">
                    <ul class="animated fadeIn col-md-12">
                        <li>
                            <h1 class="h1-responsive">Graphic Designer</h1>
                        </li>
                        <li>
                            <div class="text-center">
                                <img src="../img/faviconIcon.PNG" class="rounded mx-auto d-block" alt="...Card image cap"> How much logo can you fit in 32 pixels?<br>I started as an artist and found my media in digital
                            </div>
                        </li>
                        <li>
                            <a target="_blank" href="https://thenextweb.com/dd/2012/03/31/why-cant-startups-find-designers/" class="btn btn-default btn-lg" rel="nofollow">Why Can’t Startups Find Designers?</a>
                        </li>
                    </ul>
                </div>
                <!-- /.Caption -->

            </div>
            <!--/.Third slide-->

Hi there TurtleWolf1,

are you, personally, able to reproduce your problem with
the little snippet of code that you posted? :rolleyes:

I, of course, as a mere mortal, did not even bother to try. :unhappy:

coothead

the attached image is from my own machine

I believe coothead’s point is that you haven’t given sufficient code to enable anybody else to reproduce the issue, and hence to assist you to a solution. HTML without CSS is not much help for a CSS issue.

1 Like

I’ve tried recreating it on CodePen to disastrous results. I don’t think I’m adding anything extra other than the classes that come default in BootStrap 4, here’s everything together on GitHub or you can preview it live at TurtleWolfe.com
https://github.com/TurtleWolf/TWdotCOMtypeSET

I’m probably overlooking something, but on your site, I can’t tell where the 32px icon is now or is supposed to be. How about assigning a border or outline of 2px solid yellow or some such visible color to its container (not to the image itself). You might also add a similar dashed outline around the image itself. If you can’t see the border or outline, that’s a clue that you should be able to pursue until it is at least visible.

Hi there TurtleWolf1,

check out the attachment, it may suit your requirements. :winky:

index.zip (5.4 KB)

coothead

1 Like

GitHub

Thank you, that looks much better… I did a file compare to find what you changed. You even patched one of my anchor links at the bottom of the page. Thank you very much. I’m still getting the hang of GitHub and haven’t done a pull request yet… I was wondering if I could convince you to feed that to me as a pull request, so I can practice?

an issue

like, would the pull request reference a specific issue?

I can often be persuaded to do all sorts of things but,
unfortunately, I do not know what a “pull request” is. :wonky:

Perhaps you can elucidate. :winky:

coothead

My understanding is it would be the industry jargon for you to submit the changes to a repository, after reviewing them, They could be committed to the main branch… https://help.github.com/articles/about-pull-requests/

Oh my gosh, all that movement outside this forum is way above my head. :eek:

I think that it would be better, and simpler, for me to carry on correcting
and modifying code and let you take care of all the pushing and pushing. :rofl:

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.