My current objective revolves around implementing a specific design, as illustrated in this image.
The issue I'm encountering in my code pertains to the utilization of the bootstrap grid system for ease of layout. However, when I incorporate both text and image elements within the grid system (rows and columns), they yield an outcome similar to the one shown in this problematic image. How can I attain the desired appearance resembling the first photo I shared? Furthermore, maintaining responsiveness on my website is a critical aspect. I appreciate any insights or solutions provided. Thank you.
Below are snippets of the HTML and CSS segments:
<!--- Inserted HTML Code Here --->
CSS:
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
.navbar-brand,
.nav-link {
color: #555555;
}
.navbar-brand {
margin-left: 10px;
}
.navbar-brand:hover,
.nav-link:hover {
color: black;
}