I'm from a non-tech background. I want to edit the trending page of my website so that the title of the songs appear within the same line as they appear in desktop and tablet. What changes should I make in order to achieve it? If someone could help me out I'd be really grateful.

Mobile Desktop

.home_trending {
    background: #fff;
    padding: 25px;
}
.inner_home_trending:nth-child(2n 1) {
    clear: left;
}
.home_inner_details {
    width: 70%;
    display: inline-block;
    vertical-align:middle;
    padding-left: 15px;
}
.home_p p {
    margin: 0px !important;
}
.home_p .module-head {
    border-top: 6px solid #7464f2;
    border-radius: 3px;
}
.img_back .header img,
.movie_fream img,
.main-post img{
        background-image: url(https://themusicalsafari.com/wp-content/uploads/2020/07/border.jpeg);
    background-size: cover;
   padding: 25px 25px;
    background-position: center;
    background-repeat: no-repeat;
}
.textwidget .main-post img,
.music_img .main-post img {
    padding:17px;
}

.home_inner_details h2 {
    font-size: 18px;
        padding-bottom: 5px;
}
.home_inner_details a {
    color: #333;
    font-weight: 600;
}
.inner_number {
    width: 10%;
    display: inline-block;
    vertical-align:middle;
        text-align: left;
    font-size: 18px;
    color: #ccc;
    font-weight: 700;
}
.inner_img {
    width: 18%;
    display: inline-block;
    vertical-align:middle;
}
.music_img .header {
    padding: 15px;
}

.img_back .main-post h2.entry-title {

    margin-right: 15px;
}
.img_back .main-post .entry-title,
.img_back .main-post  .post-meta.vcard{
    display:block;
    vertical-align: middle;
}
.inner_home_trending {
    width: 50%;
    float: left;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.main_meta_val p {
    color: #666;
}
.main_meta_val span {
    font-weight: 600;
}
.ly_text_center{
    text-align:center;
        margin-top: 20px !important;
}
.post_col_movies a.viewmore {
    text-align: center;
    width: 100%;
    display: block;
    color: #28aaab;
}
.movie_block .post-content span {
    width: 100%;
    text-align: center;
    display: block;
}

As I've mentioned above, I've zero knowledge about coding, still, I tried to change certain values, and see what would happen, but I couldn't get the result I wanted.

CodePudding user response：

try to use flex-wrap: nowrap; on the element that has the photo and the title, here it is better described https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap