What steps can be taken to ensure the WhatsApp icon is easily visible on a small screen?

I currently have a navigation bar with the left side dedicated to navigation items and the right side featuring a whatsapp icon.

<mat-toolbar class="nav">
   <a routerLink="app-aaa" mat-button>aaa</a>
   <a routerLink="app-bbb" mat-button>bbb</a>
   <a routerLink="app-ccc" mat-button>ccc</a>
   <a routerLink="app-ddd" mat-button>ddd</a>
   <a routerLink="app-eee" mat-button>eee</a>
   <a routerLink="app-fff" mat-button>fff</a>
   <a routerLink="app-ggg" mat-button>ggg</a>
   <a routerLink="app-hhh" mat-button>hhh</a>
   <span><a href="https://api.whatsapp.com//send?phone=1234567890">
       <svg viewBox="0 0 32 32" class="whatsapp-ico">
         <path
            d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0...
   </svg>
  </a></span>
</mat-toolbar>

The corresponding CSS styles are:

 .whatsapp-ico{
    fill: white;
    width: 24px;
    height: 24px;
    padding: 3px;
    background-color: #4dc247;
    border-radius: 50%;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    z-index: 10;
 }

 .whatsapp-ico:hover{
      box-shadow: 2px 2px 11px rgba(0,0,0,0.7);
 }

 .nav {
      background-color: lightgray;
      font-weight: 700;
      font-size: 24px;
      text-decoration: none;
      color: #fff;
  }
 .nav span {
     margin-left: 25%;
 }

While this layout works well on desktop screens where all items are in one row, it is not responsive when viewed on smaller screens such as phones. The icon disappears and some navigation items become cut off. How can I make this design responsive for different screen sizes?

htmlcssangularangular-material

Answer №1

If you want to ensure your website is responsive, consider using @media queries in your CSS.

For more information on responsive web design, check out this helpful resource: https://www.w3schools.com/css/css_rwd_intro.asp

A good practice I follow is creating separate CSS files for different device widths:

<link rel="stylesheet" media="screen and (min-device-width: 320px)"href="css/320style.css">
<link rel="stylesheet" media="screen and (min-device-width: 760px)"href="css/760style.css">
<link rel="stylesheet" media="screen and (min-device-width: 900px)"href="css/900style.css">
<link rel="stylesheet" media="screen and (min-device-width: 1200px)"href="css/1200style.css">

You can customize the width values based on your specific needs.

A best practice tip is to start designing from a mobile phone perspective and then scale up. You can eliminate the 320style.css file and create a general CSS that applies to all devices, including those below 320px width.

Answer №2

Discovered the answer on my own after some troubleshooting. I made a modification within the nav class by including the following code snippet.

@media only screen and (max-width: 600px) {
    flex-direction: column;
    height: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Close several dropdowns at once with ng-bootstrap

Within my Angular app, there are two dropdowns that I have integrated: <div class="input-group"> <input id="startDate" type="text" class="form-control" aria-label="Start date" ...

angulartypescriptbootstrap-4ng-bootstrap

Creating customizable Isotope objects using custom CSS margins that are influenced by the child-nth selector and JavaScript

My recent project involved creating a simple .isotope gallery, and when viewing the selected #portfolio-wrap container in Chrome Dev Tools, here is how it appears: Unfortunately, I am unable to upload three links here. Please visit this link for more info ...

javascriptcssmarginjquery-isotopecss-selectors

Ensuring CSS tables fill their parent container or overflow as necessary

How can I create a dynamic table with variable-sized columns that always fills the parent area, regardless of the number of cells? The goal is to allow scrolling if needed, but ensure the table spans the entire parent space even with few cells. I've ...

csssass

PHP code: Output an empty <td> element for each iteration in a foreach loop

I have two arrays: $arrInfoComment; The first array contains the ID of the users who have commented along with their comments. (For example: 2 comments) $arrInfoExpert; The second array contains the IDs of users. (3 users) I am using a foreach loop to ...

phphtmlarrays

Jquery does not display the variable in the Firefox console using console.log

I am trying to retrieve the data value from the text input, but it's not getting logged in the console. I even tried using a breakpoint, but it still doesn't console anything. What could be the issue? var x = '' $(() => { $("#en ...

htmljquery

Loading CSS resources in advance can still cause rendering delays

Trying to preload CSS using a link tag with the "preload" attribute set Place this inside the Head tag: <link rel="preload" href="css/layout.css" as="style"> Then add this script at the bottom of the Body tag (although placement shouldn't mat ...

javascripthtmlcssgoogle-pagespeed

Encountered an issue in Angular where the property 'value' is undefined and cannot be read

I am new to learning Angular and have come across an issue with my form. Here is the HTML form code: <mat-form-field class="tp-full-width" style="padding-left: 20px;"> <input #equiId formControlName="equiId" matInput placeholder="Equipment ...

angularangular-material

Spring Boot fails to recognize path variable data sent from Angular

When working with Angular 7, I encountered a situation where I needed to pass a value from the service class of Angular. Here is how I achieved it: executeHelloWorldBeanServiceWithPathVariable(name){ console.log("name coming from here"+name); retu ...

javascriptjavaangularspringtypescript

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

Tips for transferring the ID from one element to another using JavaScript

I'm attempting to create a slideshow using icons all within one class. The "active" style class will have an ID and represent the current picture. By clicking either the left or right button, I aim to change the style of the active class. const l ...

javascripthtmlcss

To properly document the results, I must utilize a button to record the identification of a specific color

I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade ...

javascriptjqueryhtmlcssexcel

Tips for tallying the quantity of dynamically appended list items on a webpage with jQuery?

Is there a way to accurately count the number of dynamically added list items on a webpage using jQuery? While I can easily count list items that are already present on the page, I am unsure how to do so for items added after the initial load. HTML: < ...

javascriptjqueryhtml

What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross. <ul *ngFor="let filtered of reposFiltered | keyvalue"> <li *ngIf=& ...

angulartypescriptobjectwebfrontend

Is it possible to stop the manipulation of HTML and CSS elements on a webpage using tools similar to Firebug?

How can we prevent unauthorized editing of HTML and CSS content on a webpage using tools like Firebug? I have noticed that some users are altering values in hidden fields and manipulating content within div or span tags to their advantage. They seem to be ...

htmljavascriptphpcss

Crafting a dynamic inline search form with Bootstrap

My goal is to replicate the design in this image: This is my current progress: ...

htmlcss

Transferring data from PHP to an HTML function

I have attempted to retrieve the coordinates generated by the geocode and passed them to the function initialize in order to display a map with the location. Despite transferring the variables from PHP to the function initialize(), it seems that the lati ...

phphtmlfunction

The CSS float property and text alignment only apply when elements are displayed inline

I am facing an issue with my ASP .net core 2.1 app. I have customized the scaffolded crud details page, but I am encountering hurdles with the dl, dt, and dd elements. The text inside dt elements, which display the field names, is appearing next to them o ...

htmlcssrazorcss-floatinline-styles

Executing a function to erase the stored value in local storage during an Angular unit test

Looking to verify whether the localStorage gets cleared when I execute my function. Component ngOnInit() { // Logging out when reaching login screen for login purposes this.authService.logout(); } authService logout() { // Removing logged i ...

javascriptangulartypescriptunit-testingangular-unit-test

reposition md-dialog labels on the fly

My tab dialog is not evenly arranged as shown below: https://i.sstatic.net/ghn4v.jpg Despite trying the flex directive, the tabs ("DESCRIPTION, MEANS,...) do not span the available space uniformly. Here is a shortened version of my HTML: <md-t ...

javascripthtmlangularjsflexboxangular-material

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait