What is the best way to ensure the button remains centered when the screen is resized?

.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    .codrops-top span.right{
        float: right;
        
    }
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media screen and (min-width: 1338px){
.largeScreen {width:100%;text-align:center;}
.largeScreen span {display:inline-block;}
.hide{
    display: none;
}
}
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="col-lg-3 col-md-3 col-sm-3 hide">
                        <a href="">
                            <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6 hide">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Blog</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Career</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Client Area</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

When trying to center the client area button on a 1338px screen size, it remains positioned on the left side instead of being in the center as desired.

htmlcsstwitter-bootstrap-3

Answer №1

.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
        text-align: center;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media only screen and (max-width: 1338px){
        #hide{
           
        }
        .codrops-top{
           text-align: center;
           float:right;
       }
   }
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div id="hide" class="col-lg-3 col-md-3 col-sm-3">
                        <a href="">
                            <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Blog</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Career</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Client Area</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №2

Assuming that you have already integrated bootstrap into your codebase.

<style> 
    @media screen and (min-width: 1338px){
        .largeScreen {width:100%;text-align:center;}
        .largeScreen span {display:inline-block;}
        .hidden {display:none;}
    }
</style>
<div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
    <span>
         <a href="#" class="btn btn-primary">Client Area</a>
    </span>
</div>
  • Avoid using the same ID multiple times in your code. I noticed that id="hide" is repeated. Consider using class="hidden" instead.
  • If you only want to hide elements above 1338px, you may want to rename the hidden class as the default Bootstrap hide class hides content across all resolutions.
  • You forgot to add display:none in the CSS for the hidden class.
  • Remove float:right from the span. You need to remove the float property for text-align:center to take effect properly.
  • I introduced the largeScreen class to ensure that the col-lg-3 col-md-3 col-sm-3 classes do not limit the div width to just 25%.

I hope this response assists you in resolving your issue.

Answer №3

.codrops-top {
        line-height: 30px;
        font-size: 13px;
        background: #fff;
        background: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        z-index: 9999;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        font-family: Cambria, Georgia, serif;
        box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
        font-weight: 900;
        text-align: center;
    }
    .codrops-top a {
        padding: 0px 10px;
        letter-spacing: 1px;
        color: #333;
        display: inline-block;
        text-decoration: none;
    }
    .codrops-top a:hover {
        color:#12836d;
        cursor:pointer;
        text-decoration: none;
    }
    
    .codrops-top a{
        color:black;
    }
    .fa{
        padding:0 5px;
    }
    .codrops-top span a.btn {
        padding: 9px 38px;
        line-height: 20px;
    }
    .codrops-top span a.btn-primary {
        color: #fff;
        background-color: #5bbc2e;
        border-color: #5bbc2e;
    }
@media only screen and (max-width: 767px){
        .codrops-top{
            text-align: center;
        }
        .codrops-top span.right{
            text-align: center;
            float:none;

        }
    }
    @media only screen and (max-width: 1338px){
        #hide{display:none;             
        }
        .codrops-top{
           text-align: center;
           float:right;
       }
   }
<div class="codrops-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div id="hide" class="col-lg-3 col-md-3 col-sm-3">
                        <a href="">
                            <strong>Your Reliable Source </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808
                        </a>
                    </div>
                    <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
                        <a href="">
                            <strong><span><i class="fa fa-book"></i></span>Articles</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-trophy"></i></span>Achievements</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-sitemap"></i></span>Navigation</strong>
                        </a>
                        <a href="">
                            <strong><span><i class="fa fa-rocket"></i></span>Get a Quote</strong>
                        </a>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <span class="right">
                            <a href="">
                                <a href="#" class="btn btn-primary">Customer Portal</a>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

What is the most effective way to showcase PHP Multidimensional Arrays?

Is there a way to utilize the foreach loop in PHP to display this content as a list? I am aiming to present it in a list format. $quantity=0; $quantities = array( array('Jan',($quantity += $ppmpitem->m1)), array ...

phphtmlarraysmultidimensional-arraydisplay

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

javascriptjqueryhtmlcsswordpress

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

javascriptjqueryhtml

Having difficulty controlling the DOM within an AngularJS template

My website utilizes AngularJS templates, specifically a Single Page Application (SPA). Within one of the templates, I am utilizing a tab control from the AngularUI library named Ui-Tabset. During the rendering process, this control generates a ul element ...

javascriptjqueryhtmlcssangularjs

css problem with scaling in firefox

My goal is to create a website that adjusts its size based on the document size. When the document size is between 0px and 1024px, I want the design to be responsive. This can easily be achieved with CSS media queries. Similarly, when the document size is ...

javascriptjquerycsstransform

Exploring issues with jQuery

I'm encountering an issue with my code. I have multiple divs with the same classes, and when I click on (toggle#1) with the .comments-toggle class, all divs below toggle-container expand. What I actually want is for only the div directly below .commen ...

javascriptjqueryhtmlcss

Utilizing CSS Media Queries for Page Layout Adaptation

After previously asking about a different issue with this project, I have encountered yet another problem. The task at hand requires using three distinct media queries to alter the page layout depending on the screen size in use (currently being tested by ...

htmlcssmedia-queries

Leveraging a combination of AngularJS directives within a single div element

Why can't I use multiple directives in the same div tag in AngularJS? The product names from the module are not displayed with the following HTML code: <!DOCTYPE html> <html ng-app="gemStore"> <head> <title></ti ...

javascripthtmlangularjs

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

looping through an ajax function with addEventListener

Apologies in advance for any errors in my English. My task involves creating a simple webpage with just 2 links. When one of these links is clicked, it should load the content of a specific .html file on the same page. For example: clicking on link 1 (wi ...

javascripthtmlajax

Delete the content within the span tag

Is there a way to remove the time + icon displayed on my blog page? <span><i class="fa fa-newspaper-o"></i>47 sec read</span> I attempted to use .fa-newspaper-o{display:hidden} however, this only hides the icon before "47 sec" b ...

htmlcss

Eliminate a specific element from the dataset

My question revolves around a data array used to populate three drop down <select> boxes. How can I eliminate duplicate values within the drop downs without affecting the array itself? For example: data = { firstbox_a: ['grpA_1','gr ...

javascripthtmlarraysjsonhtml-select

What are the best techniques for using jQuery to manipulate an HTML form that contains nested elements?

I have a scenario where I need to dynamically generate mini-forms within an empty form based on certain conditions. For instance, imagine a form that gathers information about restaurants such as their names and locations. Depending on the number of restau ...

javascriptjqueryhtmlforms

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

javascriptphphtmlajax

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

javascripthtmlajaxmobilebrowser

Challenge encountered with AJAX request

Whenever I trigger an AJAX request to a JSP using a dropdown menu, it works perfectly fine. However, when I try to trigger the same request using a submit button, the content vanishes and the page refreshes. function najax() { $.ajax({ url:"te ...

javascriptjqueryhtmlajax

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

htmlsvgpolygonclip-path

Tips for handling external CSS dependencies in a Create React App project

Working on a web application using CRA 3.4.1 along with a component library called PrimeReact 4.1.2. My custom CSS is processed through the PostCSS setup in CRA, which adds prefixed versions for properties like display: flex to ensure IE10 support in the ...

cssreactjscreate-react-appreact-scripts

Tips for sending every individual string object within an array as post data via ajax

I have a scenario where I am dealing with dynamically generated text boxes. Each value from these text boxes needs to be stored in a JSON array when submitted. The approach I took was to push all the values into an array and upon submission, these values a ...

javascripthtmlajaxmongodbejs