How to make the image and title change when changing images (together they make up the logo):

<!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"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <title>Храм св. прп. Сергия Радонежского</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <header> <div class="container"> <div class="row"> <div class=" col-md-8 "> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a href="/" class="nav navbar-nav"> <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwT_QRo3-Rtjno40A4etZJL6ThvnEnHBHajjE4AWAE-n--HohoxFpXA9Q" alt="Св. прп. Сергий Радонежский"> </a> <div id="logo" class="nav navbar-nav"> <a href="/"> <h6>Русская православная церковь Московский патриархат <br /> Официальный сайт </h6> <h3>Храм св. прп. Сергия Радонежского</h3> </a> </div> </div> </div> </nav> </div> <div class="col-md-4 "> <div class="panel panel-default"> <div class="panel-heading">СЕГОДНЯ:</div> <div class="panel-body"> <p> 27 сентября 2017 г. ( 14 сентября ст.ст.), среда. Седмица 17-я по Пятидесятнице. Строгий пост. Пища с растительным маслом. Воздвижение Честного и Животворящего Креста Господня. Преставление свт. Иоанна Златоуста. Леснинской иконы Божией Матери. Утр. - Ин., 42 зач. (от полу́), XII, 28-36. Лит. - 1 Кор., 125 зач., I, 18-24. Ин., 60 зач., XIX, 6-11, 13-20, 25-28, 30-35.</p> </div> </div> </div> </div> </header> </body> </html>

Is the markup correct and how should it be done so that for any screen size the picture and the name of the site will be adapted and displayed in one line.

    1 answer 1

    To position the caption next to the picture, you use the navbar-nav class - this is a bad decision: it is configured to show items in a row only on a high resolution. Throw out this class and set up via CSS float:left in the image:

     #logoimage { float: left; } #logo { margin-left: 80px } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <header> <div class="container"> <div class="row"> <div class=" col-xs-8"> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a href="/" id="logoimage"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwT_QRo3-Rtjno40A4etZJL6ThvnEnHBHajjE4AWAE-n--HohoxFpXA9Q" alt="Св. прп. Сергий Радонежский"> </a> <div id="logo"> <a href="/"> <h6>Русская православная церковь Московский патриархат <br /> Официальный сайт </h6> <h3>Храм св. прп. Сергия Радонежского</h3> </a> </div> </div> </div> </nav> </div> <div class="col-xs-4 "> <div class="panel panel-default"> <div class="panel-heading">СЕГОДНЯ:</div> <div class="panel-body"> <p> 27 сентября 2017 г. ( 14 сентября ст.ст.), среда. Седмица 17-я по Пятидесятнице. Строгий пост. Пища с растительным маслом. Воздвижение Честного и Животворящего Креста Господня. Преставление свт. Иоанна Златоуста. Леснинской иконы Божией Матери. Утр. - Ин., 42 зач. (от полу́), XII, 28-36. Лит. - 1 Кор., 125 зач., I, 18-24. Ин., 60 зач., XIX, 6-11, 13-20, 25-28, 30-35.</p> </div> </div> </div> </div>

    Also, make sure that you use not only the " col-md-X " classes but also the " col-xs-X " classes. md - means the average screen size, but still need xs - mobile, sm - tablet. Study this question

    • Thank you very much, I read the plugin guide. It seems there are incorrectly indicated grids. If md = 12, then xs = 36, and sm = 6. Yes, I still do not understand. Example: Mobile and desktop (1 example does not work for me, I put it in the end: <div class="row"> <div class="col-xs-24 col-md-8 "></div><div class="col-xs-12 col-md-4 "></div></div> ) - Flambo
    • @ Flambo no, the grids are the same everywhere - 12 parts, the difference is only in the screen resolution. On the mobile, xs is valid; xs and sm acts on the tablet, but sm is in priority; on the middle screen, xs, sm, md, md are in priority; on the big one - in lg priority. Thus it is necessary to specify everywhere xs, the rest, if necessary. And there are 12 parts everywhere, col-xs-24 cannot be - Crantisz
    • thank you very much! - Flambo
    • thank you very much! But I don’t understand where the .col-xs-6 .col-sm-4.col-xs-6 .col-sm-4.col-xs-6 .col-sm-4 Copy <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> , md .row 12. For the 1st, embedded in .row div sm tablet will display a half div , and for a mobile, a full div . And what's more (mobile or tablet), and how are these numbers obtained by col-xs-12 col-sm-6 ? - Flambo
    • @Flambo col-xs-12 col-sm-6 means that at medium resolution the block will be half the width, and on the mobile phone the entire width, and the block next to it will move to a new line - Crantisz