Dibyendu

Great! This one worked! Thanks a ton!

There are some modification needed that I’ll do! Atleast this is working!

One thing still remains

I tried to change the black background in my website to some other color. But it is not taking an effect..! what could be the problem? I am sorry if that too much to ask for! :/

Okay, Let me get it cleared what I have understood.

I need to put the custom codes all the @media styling {} which ever is mentioned for individual devices. right?

I mean the same styling code in each @media?

?? Thanks for making that work! ??

No I mean the entire form field. mean the subscription part!

To avoid all these mess shoudl I consider making the Menu wide and place it across the entire pagewidth and place the logo in the centre! But that will change the entire look of my website! that I am afraid of.

Aha! that has created a border between the subscription row and the featured pages! Nice! that was my primary requirement which I asked for long ago.! Thanks for that!

One last requirement is till there to make this row background different from the website background.

By the way I tried to change the black background in my website to some other color. But it is not taking an effect..! what could be the problem? I am sorry if that too much to ask for! :/

But will the page look different in diff resolution? Then that is definitely a drawback right? The menu should be in one line in all the resolution! That should be the case. what else I need to do in order to achieve that?

Didnt improve the situation

https://snag.gy/tmxo9.jpg

This I need to add in function.php right? or style.css

I am repeating what I understood from your instruction. I got to put entire CSS code before this bootstrap code, right? and Bootstrap covers almost all the device visual properties, correct? Then why individual device resizing needed?Can you plz explain a little more. So that I can do necessary changes.

@rdellconsulting

Please check

https://prntscr.com/2vzjyr

the Menu is cluttered in my Laptop itself.

I basically want to fix almost all the devices.

@electricfeet

If you get time please check on my last query here.

I have made all the paddings less. Still it is showing the same this.

2nd point is not feasible for me. I got to keep all the pages in the menu.

Will bootstrap coding mentioned above will help. But in that case as well I have put the code but it is not making any difference

I am pastingmy Child CSS here. Please have a look and suggest accordingly

/*
Theme Name:     Customizr Child
Theme URI:      https://themesandco.com/customizr
Description:    A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr's core code. In order to keep your code as clean and flexible as possible, try to use Customizr's hooks API for your customizations. Do something awesome and have fun !
Author:         Nicolas Guillaume (nikeo)
Author URI:     https://themesandco.com
Template:       customizr
Version:        1.0.0
*/

/* Your awesome customizations start right here !
-------------------------------------------------------------- */
/* ================================================ */
/* Responsive - Media queries                       */
/* Based on:                                        */
/* https://lab.maltewassermann.com/viewport-resizer/ */
/* ================================================ */

/* ============================================== */
/* HDTV                                           */
/*                                      1920x1080 */
/* ============================================== */
@media all and (min-width: 1080px) and (max-width: 1920px) {
/*  */

}
/* ============================================== */
/* Widescreen                                     */
/*                                       1280x800 */
/* ============================================== */
@media all and (min-width: 800px) and (max-width: 1280px) {
/*  */

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                                */
/* ============================================== */
@media all and (min-width: 980px) {
/*  */

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                                */
/* ============================================== */
@media all and (max-width: 979px) {
/*  */

}

/* ============================================== */
/* iPad Landscape and Narrow browser              */
/*                                       1024x768 */
/* ============================================== */
@media all and (min-width: 768px) and (max-width: 1024px) {
/*  */

}

/* ============================================== */
/* iPad Portrait and Narrower browsers            */
/*                                       768x1024 */
/* ============================================== */
@media all and (max-width: 768px) {
/*  */

}

/* ============================================== */
/* Small Tablet Landscape                         */
/*                                        800x600 */
/* ============================================== */
@media all and (min-width: 600px) and (max-width:800px) {
/*  */

}

/* ============================================== */
/* Small Tablet Portrait                          */
/*                                        600x800 */
/* ============================================== */
@media all and (max-width:600px) {
/*  */

}

/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media all and (min-width: 320px) and (max-width:568px) {
/*  */

}

/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media all and (min-width: 320px) and (max-width:480px) {
/*  */

}

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media all and (max-width:320px) {
/*  */

}

/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media all and (min-width:240px) and (max-width:320px) {
/*  */

}

/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media all and (max-width:240px) {
/*  */

}

.navbar-inner {
    background: #F25C27;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.tc-header.clearfix.row-fluid {
    background: #F25C27;
}
.tc-header .brand a {
  position:  relative;
  top: 10px;
  left: -1%;
}
.site-logo img {
    width: auto;
    height: auto;
}
.navbar .nav > li > a {
    color: #fff;
    text-shadow: none;
}
.navbar .nav > li > a:hover {
    color: #fff;
    background: #000;
}
.caret {
    border-top: 4px solid  #fff;
}
.navbar .nav li.dropdown .caret {
    border-top-color: #000;
    border-bottom-color: #000;
}
.navbar .nav li.dropdown > a:hover .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar-wrapper .navbar h2 {
    color: #fff;
    text-shadow: none;
}
.social-block a {
    color: #000;
    text-shadow: none;
}
/*Dropdown menu background and hover colors*/
.dropdown-menu > li > a {
    color: #fff;
    background: #000;
}
.dropdown-menu > li > a:hover {
    color: #fff;
    background: #F25C27;
}
.dropdown-menu {
    background-color: #000;
    border-radius: 0;
}
/*Current page menu item*/
.navbar .nav > li.current-menu-item > a{
    color: #fff;
    background: #000;
}
/*Content background*/
.entry-content {
    background: #ccc;
    padding: 8px;
}
/*Font color and style*/
body {
    color: #707070;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*Sidebar widget icons orange*/
.widget h3:before {
    color: #F25C27;
}
/*All links orange color*/
a {
    color: #F25C27;
}
/*Body background black*/
body {
    background: #000;
}
/*Removes text shadow for a cleaner text look*/
* {
    text-shadow: none !important;
}
/*Circles around featured images*/
.round-div {
    border: 104px solid #000;
}
/*Submenu & pages color and background*/
.navbar .nav > li.current-menu-ancestor > a {
    color: #fff;
    background: #000;
}
.dropdown-menu > li.current-menu-item > a {
    color: #fff;
    background: #000;
}
/*Slider width Auto*/
#customizr-slider {
        margin: 0 auto;
}

/*Adjust menu items to not wrap as soon*/
.navbar .nav > li > a {
    padding: 3px 6px 3px 6px;
}

/* Remove the icon and category archives header*/
header.archive-header {
display: none;
}

/* Remove the icon before post titles */
.format-icon:before {
display: none;
}

Anyone available. I terribly need this one to be fixed! Please help!

But how will I find that out. Previously it was working perfect. I deleted the old test albums and trying to create new ones and its not working .. ??