/* STYLING THE GLOBAL ELEMENTS */
body {
background-color: #a6a6a6;
padding-bottom: 40px;
color: #5a5a5a;
}
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 15px;
padding-left: 15px;
}
... (additional CSS code)
/* MAKING PORTFOLIO IMAGES HORIZONTAL */
.css-img div {
display: inline-block;
}
@media (min-width: 768px) {
/* Adjustments for larger viewports */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
<body>
<div class="navbar-wrapper">
...
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
...
</div>
</nav>
<div class="css-img">
... (image display code)
</div>
<hr class="featurette-divider">
<footer>
... (footer content)
</footer>
... (Bootstrap JavaScript files)
</body>
</html>In the process of creating a Wordpress theme using this template, I encountered an issue with displaying images in my portfolio page horizontally instead of vertically. By setting the image containers to "inline-block", I was able to achieve this layout. However, when adding text below the images, it disrupted the horizontal alignment. Any suggestions on how to resolve this issue and maintain the desired layout? Due to restrictions, certain parts of the Bootstrap code are excluded here but are present in the actual code environment.