The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

@import url('https://fonts.googleapis.com/css?family=Dosis');
* {
    box-sizing: border-box;
}

/*Xtra Small */

body {
    font-family: 'Dosis', sans-serif;
    line-height: 1.618em;
    font-size: 18px;
    background: #383231;
    color: #454545;
}

.main-container {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}

.header-img {
    text-align: center;
}

.header-img img {
    width: 232px;
    height: 232px;
    border-radius: 50%;
    border: 1px solid #000;
}

.header-content {
    text-align: center;
    display: block;
}

.header-content h1 {
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 2px;
    font-size: 7vw;
    margin-top: 54px;
}



.header-content h3 {
    font-size: 3vw;
    font-weight: 300;
    line-height: 2em;
}

.header,
.menu {
    padding: 48px 0;
}


a {
    text-decoration: none;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    position: relative;
}

.header-content ul li {
    display: inline-block;
    position: relative;
    width: 43px;
}

.header-content ul li a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: #81b09b;
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    border: 0.4px solid #383231;
    transition: all 0.35s;
    cursor: pointer;
}

.fa {
    color: #fff;
    transition: all 0.35s;
}

.fa:hover {
    color: #383231;
    transition: all 0.50s;
}

.menu {
    text-align: center;
}

.menu a {
    color: #454545;
}

nav li {
    display: inline-block;
    padding: 0 5px;
}

nav a {
    text-align: center;
    font-size: 18px;
}

nav img {
    width: 170px;
    height: 170px;
}

nav span {
    display: block;
    cursor: pointer;
}

hr {
    padding: 0;
    margin: 0;
}

.footer {
    width: 100%;
    padding: 17px;
}

.footer div {
    text-align: center;
    margin-bottom: 1rem;
}

.footer div:last-child {
    margin-bottom: 0;
}

.footer a {
    font-size: 18px;
}

.footer span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #81b09b;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.35s;
}




<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main-container">
        <div class="container-fluid header">
            <div class="row">
                <div class="col-md-5 col-xs-12 header-img">
                    <img src="https://image.ibb.co/cwot07/profile_gif.png" alt="profile-img">
                </div>
                <div class="col-md-7 col-xs-12 header-content">
                    <h1>Amit Sharma</h1>
                    <h3>Web Designer & Mobile Application Developer</h3>
                    <ul>
                        <li>
                            <a href="#" class="icon icon-fa cebook">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-twitter">
                                <i class="fa fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-googlePlus">
                                <i class="fa fa-google"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="icon icon-youtube">
                                <i class="fa fa-youtube"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <hr>
        <div class="menu">
            <div class="row">
                <div class="col-md-12">
                    <nav>
                        <ul>
                            <li>
                                <a href="#" class="menu">
                                    <img id="profile" src="https://image.ibb.co/cwot07/profile_gif.png" alt="profile-img">
                                    <span>Profile</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="resume" class="resume" src="https://image.ibb.co/dwKNtS/resume_01.png" alt="img">
                                    <span>Resume</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="port" class="portfolio" src="https://image.ibb.co/m5Ot07/port_01.png" alt="img">
                                    <span>Portfolio</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu">
                                    <img id="contact" class="contact" src="https://image.ibb.co/bFUu7n/contact_01.png" alt="img">
                                    <span>Contact</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <hr>
        <div class="footer">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="contact-no">
                        <span><i class="fa fa-phone"></i></span>+919871344356
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="mail">
                        <span><i class="fa fa-paper-plane"></i></span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3cfcbd6cfc7c7d6909ae2dbc3cacdcd8ccbcc">[email protected]</a>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <a class="address">
                        <span><i class="fa fa-map-marker"></i></span>Rz New T 19 uttam nagar
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <span class="create-by">Create by Amit Sharma</span>
                </div>
            </div>
        </div>
    </div>

In Small Media Query Menu bar is not set in center but its work in both medium or extra small media query i try all possible solution. but did not work. In Small Media Query Menu bar is not set in center but its work in both medium or extra small media query i try all possible solution. but did not work.

cssresponsive-designmedia-queries

Answer №1

To include this CSS code in your stylesheet, simply paste it at the end of your existing CSS file.

<code>@media only screen and(max-width:768px) {
         nav ul {
    width: 85%;
    text-align: center;
    display: flex;
    align-items: center;
    }
    nav ul li {
    padding:0;
    width:25%;
    }
    nav ul li img {
    width:70%
    }
    }</code>

Answer №2

@media only screen and (min-width: 48em) {
    .navigation-bar {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

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

Aligning three hyperlinks evenly to spread across the webpage

My professor provided the class with an image that may resemble something he could ask us to recreate on an upcoming exam. He suggested we try replicating it at home to study. I have most of it figured out, but there are three links positioned perfectly ac ...

htmlcss

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem? function App() { return ( < ...

htmlcssreactjs

The content will be visible when the masonry element is in the active state

I have been working on creating a unique image gallery effect using Masonry layout where the images start at 0.2 opacity and change to full opacity of 1 when hovered over. Additionally, I want each image to fade to 0.7 opacity with text "Petra, Jordan" app ...

htmlcsshoveropacitymasonry

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

javascriptcssreactjsbackground-image

Searching on Google for the Twitter Bootstrap documentation using the Google search

Seeking advice on creating a basic index page with a Google-style centered search bar using Twitter Bootstrap. Struggling to achieve desired aesthetics. Need help adding a search icon button to the right side of the search field. Utilized typeahead for fu ...

phphtmlcsstwitter-bootstrap

Maintain HOVER State in CSS Drop Down Menu upon Clicking

I have implemented a CSS Drop Down Menu on my website. In a specific section of the site, I am using the menu links to trigger AJAX-jQuery calls that dynamically change the content of a DIV without the need for page reloading. <script type="text/javasc ...

htmlcssjquerydrop-down-menu

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

javascripthtmlcsspopupcodepen

Choosing the right jQuery selector to target a section that contains div elements

Whenever the h2 element within a section is clicked, I want all the fields in that section to be displayed. For example, if the user clicks on 'Contact Information', the three form inputs (fields) below the Contact Information heading should appe ...

javascriptjquerycss

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

htmlcss

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

javascriptjquerycssangularapexcharts

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

"Enhance your website design with a navbar that seamlessly blends with the background color

Question 1: I have a requirement for my navbar to affix overlay on top of the background color and image of the div (top-banner). Currently, when I scroll down, the background color overlays my navbar affix instead. How can I ensure that my navbar sta ...

jqueryhtmlcsstwitter-bootstrap

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflow I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb-css { text-overflow: ellip ...

htmlcssangular

The effectiveness of border-radius is limited to only one side of the div

After experimenting with applying the border-radius property to a div, I encountered an issue where the border radius only worked on one side when the radius value was too large. How can I resolve this problem while maintaining the border-radius value on a ...

htmlcssborderborder-radius

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss