button over de gehele breedte op mobiel

[rob1970]

Het gaat over deze website/pagina: https://met-rob.com/fysio/index.html

Hier staat het oorspronkelijke menu op zoals het nu is.

Nu had mijn klant bij een andere fysiotherapeut gezien dat er bij hem in de menubalk helemaal rechts een oranje blok stond met "afspraak maken"

Dat wil hij ook graag hebben. Tot zover heb ik het kunnen fixen:https://met-rob.com/fysio/index2.html


Maar nu komt het.
Op een mobiel is deze button bij het bedrijf in boekel over de gehele breedte van het scherm. (zie screenshots boekel)

Dat zou bij mij ook moeten gebeuren maar krijg het niet voor elkaar. (zie screenshots domestic)

Die website uit boekel is ook een wordpress website dus in de broncode kijken heeft niet zoveel zin.

Hoe kan ik ervoor zorgen dat deze oranje button op een mobiel over de hele breedte te zien is net als bij de website van Boekel?

 

[Aar]

Die website uit boekel is ook een wordpress website dus in de broncode kijken heeft niet zoveel zin.

Kijk gewoon eens naar de code volgens de stijldebugger van je browser.

 

[rob1970]

Bedoel je dit?
Via rechtermuisknop en dan "inspecteren"

Daar heb ik al lopen zoeken maar ben bang dat ik niet precies weet waarnaar ik moet zoeken.
En dan wordt het lastig.

 

[Aar]

Ja, via Inspecteren.
Dan zie je de opbouw zoals de browser de DOM (het document) opbouwt. Je kan gewoon op de knop klikken, en dan zie je dat deel.
Zo hoef je zeker niet lang te zoeken.

 

[rob1970]

Dat is ook precies wat ik heb gedaan.

Maar dan komt dit allemaal in het rechtervenster te staan:

element.style {
}
span.tcb-button-texts>span {
    display: block;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
span.tcb-button-texts {
    color: inherit;
    display: block;
    flex: 1 1 auto;
    -webkit-flex: 1;
    position: relative;
}
.thrv-button a.tcb-button-link, .thrv-button-group-item a.tcb-button-link, .tve-form-button a.tcb-button-link {
    text-decoration: none !important;
    color: #fff;
}
a.tcb-button-link {
    background-color: #1abc9c;
    padding: 12px 15px;
    font-size: 18px;
    box-sizing: border-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden;
    width: 100%;
    text-align: center;
    line-height: 1.2em;
}
a {
    background-color: transparent;
    color: #008fff;
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
style attribute {
    --tcb-col-el-width: 1040;
}
html body {
    text-rendering: auto !important;
}
body {
    font-family: Arial,sans-serif;
    color: rgba(10,10,10,.85);
    font-size: 1rem;
    line-height: 1.5;
}
:root {
    --tcb-color-0: rgb(15, 113, 184);
    --tcb-color-0-h: 205;
    --tcb-color-0-s: 84%;
    --tcb-color-0-l: 39%;
    --tcb-color-0-a: 1;
    --tcb-background-author-image: url(https://secure.gravatar.com/avatar/246ea19…?s=256&d=mm&r=g);
    --tcb-background-user-image: url();
    --tcb-background-featured-image-thumbnail: url(https://fysioboekel.nl/wp-content/plugins/thrive-visual-editor/editor/css/images/featured_image.png);
    --tcb-skin-color-0: hsla(var(--tcb-theme-main-master-h,210), var(--tcb-theme-main-master-s,77%), var(--tcb-theme-main-master-l,54%), var(--tcb-theme-main-master-a,1));
    --tcb-skin-color-0-h: var(--tcb-theme-main-master-h,210);
    --tcb-skin-color-0-s: var(--tcb-theme-main-master-s,77%);
    --tcb-skin-color-0-l: var(--tcb-theme-main-master-l,54%);
    --tcb-skin-color-0-a: var(--tcb-theme-main-master-a,1);
    --tcb-skin-color-1: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), calc(var(--tcb-theme-main-master-s,77%) + 2% ), calc(var(--tcb-theme-main-master-l,54%) - 0% ), 0.5);
    --tcb-skin-color-1-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-1-s: calc(var(--tcb-theme-main-master-s,77%) + 2% );
    --tcb-skin-color-1-l: calc(var(--tcb-theme-main-master-l,54%) - 0% );
    --tcb-skin-color-1-a: 0.5;
    --tcb-skin-color-2: rgb(248, 248, 248);
    --tcb-skin-color-2-h: 0;
    --tcb-skin-color-2-s: 0%;
    --tcb-skin-color-2-l: 97%;
    --tcb-skin-color-2-a: 1;
    --tcb-skin-color-3: hsla(calc(var(--tcb-theme-main-master-h,210) + 30 ), 85%, 13%, 1);
    --tcb-skin-color-3-h: calc(var(--tcb-theme-main-master-h,210) + 30 );
    --tcb-skin-color-3-s: 85%;
    --tcb-skin-color-3-l: 13%;
    --tcb-skin-color-3-a: 1;
    --tcb-skin-color-4: rgb(12, 17, 21);
    --tcb-skin-color-4-h: 206;
    --tcb-skin-color-4-s: 27%;
    --tcb-skin-color-4-l: 6%;
    --tcb-skin-color-4-a: 1;
    --tcb-skin-color-5: rgb(106, 107, 108);
    --tcb-skin-color-5-h: 210;
    --tcb-skin-color-5-s: 0%;
    --tcb-skin-color-5-l: 41%;
    --tcb-skin-color-5-a: 1;
    --tcb-skin-color-8: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), calc(var(--tcb-theme-main-master-s,77%) + 2% ), calc(var(--tcb-theme-main-master-l,54%) - 0% ), 0.18);
    --tcb-skin-color-8-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-8-s: calc(var(--tcb-theme-main-master-s,77%) + 2% );
    --tcb-skin-color-8-l: calc(var(--tcb-theme-main-master-l,54%) - 0% );
    --tcb-skin-color-8-a: 0.18;
    --tcb-skin-color-9: hsla(calc(var(--tcb-theme-main-master-h,210) - 3 ), 56%, 96%, 1);
    --tcb-skin-color-9-h: calc(var(--tcb-theme-main-master-h,210) - 3 );
    --tcb-skin-color-9-s: 56%;
    --tcb-skin-color-9-l: 96%;
    --tcb-skin-color-9-a: 1;
    --tcb-skin-color-10: hsla(calc(var(--tcb-theme-main-master-h,210) - 21 ), calc(var(--tcb-theme-main-master-s,77%) + 23% ), calc(var(--tcb-theme-main-master-l,54%) + 27% ), 1);
    --tcb-skin-color-10-h: calc(var(--tcb-theme-main-master-h,210) - 21 );
    --tcb-skin-color-10-s: calc(var(--tcb-theme-main-master-s,77%) + 23% );
    --tcb-skin-color-10-l: calc(var(--tcb-theme-main-master-l,54%) + 27% );
    --tcb-skin-color-10-a: 1;
    --tcb-skin-color-13: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), calc(var(--tcb-theme-main-master-s,77%) + 2% ), calc(var(--tcb-theme-main-master-l,54%) - 18% ), 0.5);
    --tcb-skin-color-13-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-13-s: calc(var(--tcb-theme-main-master-s,77%) + 2% );
    --tcb-skin-color-13-l: calc(var(--tcb-theme-main-master-l,54%) - 18% );
    --tcb-skin-color-13-a: 0.5;
    --tcb-skin-color-14: rgb(230, 230, 230);
    --tcb-skin-color-14-h: 0;
    --tcb-skin-color-14-s: 0%;
    --tcb-skin-color-14-l: 90%;
    --tcb-skin-color-14-a: 1;
    --tcb-skin-color-16: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), 3%, 36%, 1);
    --tcb-skin-color-16-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-16-s: 3%;
    --tcb-skin-color-16-l: 36%;
    --tcb-skin-color-16-a: 1;
    --tcb-skin-color-18: hsla(calc(var(--tcb-theme-main-master-h,210) - 1 ), calc(var(--tcb-theme-main-master-s,77%) + 1% ), calc(var(--tcb-theme-main-master-l,54%) - 1% ), 0.8);
    --tcb-skin-color-18-h: calc(var(--tcb-theme-main-master-h,210) - 1 );
    --tcb-skin-color-18-s: calc(var(--tcb-theme-main-master-s,77%) + 1% );
    --tcb-skin-color-18-l: calc(var(--tcb-theme-main-master-l,54%) - 1% );
    --tcb-skin-color-18-a: 0.8;
    --tcb-skin-color-19: hsla(calc(var(--tcb-theme-main-master-h,210) - 3 ), 56%, 96%, 0.85);
    --tcb-skin-color-19-h: calc(var(--tcb-theme-main-master-h,210) - 3 );
    --tcb-skin-color-19-s: 56%;
    --tcb-skin-color-19-l: 96%;
    --tcb-skin-color-19-a: 0.85;
    --tcb-skin-color-20: hsla(calc(var(--tcb-theme-main-master-h,210) - 3 ), 56%, 96%, 0.9);
    --tcb-skin-color-20-h: calc(var(--tcb-theme-main-master-h,210) - 3 );
    --tcb-skin-color-20-s: 56%;
    --tcb-skin-color-20-l: 96%;
    --tcb-skin-color-20-a: 0.9;
    --tcb-skin-color-21: hsla(calc(var(--tcb-theme-main-master-h,210) - 210 ), calc(var(--tcb-theme-main-master-s,77%) - 77% ), calc(var(--tcb-theme-main-master-l,54%) + 46% ), 1);
    --tcb-skin-color-21-h: calc(var(--tcb-theme-main-master-h,210) - 210 );
    --tcb-skin-color-21-s: calc(var(--tcb-theme-main-master-s,77%) - 77% );
    --tcb-skin-color-21-l: calc(var(--tcb-theme-main-master-l,54%) + 46% );
    --tcb-skin-color-21-a: 1;
    --tcb-skin-color-22: rgb(255, 255, 255);
    --tcb-skin-color-22-h: 0;
    --tcb-skin-color-22-s: 0%;
    --tcb-skin-color-22-l: 100%;
    --tcb-skin-color-22-a: 1;
    --tcb-skin-color-23: rgb(32, 65, 71);
    --tcb-skin-color-23-h: 189;
    --tcb-skin-color-23-s: 37%;
    --tcb-skin-color-23-l: 20%;
    --tcb-skin-color-23-a: 1;
    --tcb-skin-color-24: rgb(59, 59, 59);
    --tcb-skin-color-24-h: 0;
    --tcb-skin-color-24-s: 0%;
    --tcb-skin-color-24-l: 23%;
    --tcb-skin-color-24-a: 1;
    --tcb-skin-color-25: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), calc(var(--tcb-theme-main-master-s,77%) + 5% ), calc(var(--tcb-theme-main-master-l,54%) + 8% ), 0.04);
    --tcb-skin-color-25-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-25-s: calc(var(--tcb-theme-main-master-s,77%) + 5% );
    --tcb-skin-color-25-l: calc(var(--tcb-theme-main-master-l,54%) + 8% );
    --tcb-skin-color-25-a: 0.04;
    --tcb-skin-color-26: hsla(calc(var(--tcb-theme-main-master-h,210) + 1 ), calc(var(--tcb-theme-main-master-s,77%) + 6% ), calc(var(--tcb-theme-main-master-l,54%) + 9% ), 0.12);
    --tcb-skin-color-26-h: calc(var(--tcb-theme-main-master-h,210) + 1 );
    --tcb-skin-color-26-s: calc(var(--tcb-theme-main-master-s,77%) + 6% );
    --tcb-skin-color-26-l: calc(var(--tcb-theme-main-master-l,54%) + 9% );
    --tcb-skin-color-26-a: 0.12;
    --tcb-skin-color-27: hsla(calc(var(--tcb-theme-main-master-h,210) + 10 ), calc(var(--tcb-theme-main-master-s,77%) + 6% ), calc(var(--tcb-theme-main-master-l,54%) + 17% ), 1);
    --tcb-skin-color-27-h: calc(var(--tcb-theme-main-master-h,210) + 10 );
    --tcb-skin-color-27-s: calc(var(--tcb-theme-main-master-s,77%) + 6% );
    --tcb-skin-color-27-l: calc(var(--tcb-theme-main-master-l,54%) + 17% );
    --tcb-skin-color-27-a: 1;
    --tcb-skin-color-28: hsla(calc(var(--tcb-theme-main-master-h,210) + 2 ), calc(var(--tcb-theme-main-master-s,77%) - 34% ), calc(var(--tcb-theme-main-master-l,54%) + 27% ), 1);
    --tcb-skin-color-28-h: calc(var(--tcb-theme-main-master-h,210) + 2 );
    --tcb-skin-color-28-s: calc(var(--tcb-theme-main-master-s,77%) - 34% );
    --tcb-skin-color-28-l: calc(var(--tcb-theme-main-master-l,54%) + 27% );
    --tcb-skin-color-28-a: 1;
    --tcb-skin-color-29: hsla(calc(var(--tcb-theme-main-master-h,210) - 0 ), calc(var(--tcb-theme-main-master-s,77%) + 6% ), calc(var(--tcb-theme-main-master-l,54%) + 10% ), 0.4);
    --tcb-skin-color-29-h: calc(var(--tcb-theme-main-master-h,210) - 0 );
    --tcb-skin-color-29-s: calc(var(--tcb-theme-main-master-s,77%) + 6% );
    --tcb-skin-color-29-l: calc(var(--tcb-theme-main-master-l,54%) + 10% );
    --tcb-skin-color-29-a: 0.4;
    --tcb-skin-color-30: hsla(calc(var(--tcb-theme-main-master-h,210) - 1 ), calc(var(--tcb-theme-main-master-s,77%) + 5% ), calc(var(--tcb-theme-main-master-l,54%) + 8% ), 0.85);
    --tcb-skin-color-30-h: calc(var(--tcb-theme-main-master-h,210) - 1 );
    --tcb-skin-color-30-s: calc(var(--tcb-theme-main-master-s,77%) + 5% );
    --tcb-skin-color-30-l: calc(var(--tcb-theme-main-master-l,54%) + 8% );
    --tcb-skin-color-30-a: 0.85;
    --tcb-main-master-h: 205;
    --tcb-main-master-s: 82%;
    --tcb-main-master-l: 40%;
    --tcb-main-master-a: 1;
    --tcb-theme-main-master-h: 205;
    --tcb-theme-main-master-s: 82%;
    --tcb-theme-main-master-l: 40%;
    --tcb-theme-main-master-a: 1;
    --tcb-tpl-color-0: rgb(47, 138, 229);
    --tcb-tpl-color-0-h: 210;
    --tcb-tpl-color-0-s: 77%;
    --tcb-tpl-color-0-l: 54%;
    --tcb-tpl-color-0-a: 1;
    --tcb-tpl-color-1: rgba(47, 139, 231, 0.5);
    --tcb-tpl-color-1-h: 210;
    --tcb-tpl-color-1-s: 79%;
    --tcb-tpl-color-1-l: 54%;
    --tcb-tpl-color-1-a: 0.5;
    --tcb-tpl-color-3: rgb(5, 5, 65);
    --tcb-tpl-color-3-h: 240;
    --tcb-tpl-color-3-s: 85%;
    --tcb-tpl-color-3-l: 13%;
    --tcb-tpl-color-3-a: 1;
    --tcb-tpl-color-8: rgba(47, 139, 231, 0.18);
    --tcb-tpl-color-8-h: 210;
    --tcb-tpl-color-8-s: 79%;
    --tcb-tpl-color-8-l: 54%;
    --tcb-tpl-color-8-a: 0.18;
    --tcb-tpl-color-9: rgb(240, 246, 251);
    --tcb-tpl-color-9-h: 207;
    --tcb-tpl-color-9-s: 57%;
    --tcb-tpl-color-9-l: 96%;
    --tcb-tpl-color-9-a: 1;
    --tcb-tpl-color-10: rgb(162, 241, 255);
    --tcb-tpl-color-10-h: 189;
    --tcb-tpl-color-10-s: 100%;
    --tcb-tpl-color-10-l: 81%;
    --tcb-tpl-color-10-a: 1;
    --tcb-tpl-color-13: rgba(19, 94, 169, 0.5);
    --tcb-tpl-color-13-h: 210;
    --tcb-tpl-color-13-s: 79%;
    --tcb-tpl-color-13-l: 36%;
    --tcb-tpl-color-13-a: 0.5;
    --tcb-tpl-color-16: rgb(90, 93, 96);
    --tcb-tpl-color-16-h: 210;
    --tcb-tpl-color-16-s: 3%;
    --tcb-tpl-color-16-l: 36%;
    --tcb-tpl-color-16-a: 1;
    --tcb-tpl-color-18: rgba(47, 139, 231, 0.8);
    --tcb-tpl-color-18-h: 210;
    --tcb-tpl-color-18-s: 79%;
    --tcb-tpl-color-18-l: 54%;
    --tcb-tpl-color-18-a: 0.8;
    --tcb-tpl-color-19: rgba(240, 246, 251, 0.85);
    --tcb-tpl-color-19-h: 207;
    --tcb-tpl-color-19-s: 57%;
    --tcb-tpl-color-19-l: 96%;
    --tcb-tpl-color-19-a: 0.85;
    --tcb-tpl-color-20: rgba(240, 246, 251, 0.9);
    --tcb-tpl-color-20-h: 207;
    --tcb-tpl-color-20-s: 57%;
    --tcb-tpl-color-20-l: 96%;
    --tcb-tpl-color-20-a: 0.9;
    --tcb-tpl-color-21: rgba(255, 255, 255, 0);
    --tcb-tpl-color-21-h: 0;
    --tcb-tpl-color-21-s: 0%;
    --tcb-tpl-color-21-l: 100%;
    --tcb-tpl-color-21-a: 0;
    --tcb-tpl-color-2: rgb(248, 248, 248);
    --tcb-tpl-color-2-h: 0;
    --tcb-tpl-color-2-s: 0%;
    --tcb-tpl-color-2-l: 97%;
    --tcb-tpl-color-2-a: 1;
    --tcb-tpl-color-4: rgb(12, 17, 21);
    --tcb-tpl-color-4-h: 206;
    --tcb-tpl-color-4-s: 27%;
    --tcb-tpl-color-4-l: 6%;
    --tcb-tpl-color-4-a: 1;
    --tcb-tpl-color-5: rgb(106, 107, 108);
    --tcb-tpl-color-5-h: 210;
    --tcb-tpl-color-5-s: 0%;
    --tcb-tpl-color-5-l: 41%;
    --tcb-tpl-color-5-a: 1;
    --tcb-tpl-color-14: rgb(230, 230, 230);
    --tcb-tpl-color-14-h: 0;
    --tcb-tpl-color-14-s: 0%;
    --tcb-tpl-color-14-l: 90%;
    --tcb-tpl-color-14-a: 1;
    --tcb-main-master-h: 210;
    --tcb-main-master-s: 77%;
    --tcb-main-master-l: 54%;
    --tcb-main-master-a: 1;
}
:root {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}
html {
    box-sizing: border-box;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-smooth: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}
html {
    text-rendering: auto !important;
}
*, *:before, *:after {
    box-sizing: inherit;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Maar volgens mij moet het ergens beginnen met: @media screen and (max-width: 736px)
Of zoiets dergelijks en dat zie ik nergens staan.

 

[Aar]

Kijk ook eens naar de HTML. Als het een dezelfde framework gebruikt, is het nog gemakkelijker met enkel HTML.

 

[rob1970]

Als ik naar de HTML kijk zie ik allemaal Wordpress "dingen" staan.

Misschien moet ik eerst de klant maar eens laten kijken hoe het er nu uitziet.

Voor hetzelfde geld vind hij het ook wel prima zo.

De button valt mijns inziens ook genoeg op op deze wijze op een mobiel.

 

[Aar]

Als ik naar de HTML kijk zie ik allemaal Wordpress "dingen" staan.

Wat voor 'dingen'? Je bedoelt HTML.

Een element in de volledige grootte is niet moeilijk met een 100% width in CSS.

 

[rob1970]

Ik dacht dat je de broncode bedoelde van de pagina om die te bekijken.

Soms is het lastig communiceren als je de juiste termen niet kent.

Ik ga verder zoeken.

Tx anyway

 

[Aar]

Ik dacht dat je de broncode bedoelde van de pagina om die te bekijken.

Soms is het lastig communiceren als je de juiste termen niet kent.

Ik ga verder zoeken.

Tx anyway

Ja, de broncode.
Maar wees a.u.b. gewoon duidelijk. 'Dingen' kan van alles zijn.

 

[rob1970]

 

[bron]

Lijkt mij een goede oplossing, misschien de button een opvallender achtergrondkleur geven?

 

[rob1970]

Die button daar gaat eruit. Hij wil de button bovenin het menu op een pc en los bovenin op een mobiel

 

[bron]

Kan je hiermee verder. Er zitten een paar foutjes in, corrigeer die ook even

<body>

<!-- Bootstrap v4.5.0 --- "lg" is breakpoint hamburger menuknop -->

<!-- ===== Header ===== -->
<header id="header" class="fixed-top">
    <div class="container d-flex align-items-center">
        <h1 class="logo mr-auto"><a href="index.html"><img src="assets/img/logo.svg" width="246" height="90"></a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="index.html" class="logo mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
        <nav class="nav-menu d-none d-lg-block">
            <ul>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="overfysiodomestic.html">Over FysioDomestic</a></li>
                <li><a href="gratisinloopspreekuur.html">Gratis inloopspreekuur</a></li>
                <li><a href="specialisaties.html">Specialisaties</a></li>
                <li><a href="depraktijk.html">De praktijk</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav><!-- .nav-menu -->
    </div>
    
    <div class="container-fluid d-flex">
        <div class="col-12 px-0">
            <!-- smartphone -->
            <a class="btn btn-success d-block d-md-none w-100 mt-2" href="onlineafspraakmaken.html" class="btn btn-success">Maak nu online een afspraak</a>
            <div class="container-lg px-0 d-none d-md-block text-right">
                <!-- tablet/desktop -->
                <a class="btn btn-success" href="onlineafspraakmaken.html" class="btn btn-success">Maak nu online een afspraak</a>
            </div>
        </div>
    </div>
    
</header><!-- End Header -->

<!-- **** deze <div> toevoegen ************ -->
<div>
<!-- ************************************** -->
    <a href="#" class="twitter"><i class="icofont-twitter"></i></a>
    <a href="#" class="facebook"><i class="icofont-facebook"></i></a>
    <a href="#" class="instagram"><i class="icofont-instagram"></i></a>
    <a href="#" class="linkedin"><i class="icofont-linkedin"></i></i></a>
</div>

<!-- ***** deze regels weghalen***************
</div>
</header><!-- End Header -->
<!-- ************************************* -->

<main id="main">

En ook dit even oplossen

</section><!-- End Hero -->

<!-- **** deze regel weghalen **************** 
<main id="main">
 ***************************************** -->

<!-- ==== About Us Section ==== --><!-- End About Us Section -->

 

[rob1970]

Ben nu onderweg. Zal vanavond kijken. Tx

 

[bron]

2 containers heb ik er ingezet. Kantelpunt ligt bij view breedte 768 pixels.

Een container-fluid (volledige breedte) met de button voor smalle view (smartphone).
In deze container-fluid een container (even breed als menu) met daarin de button voor een bredere view.

Tot en met 767 px is brede knop zichtbaar. Vanaf 768 px is kleine knop rechterkant zichtbaar.

Het zou mooier kunnen maar daar gaat teveel tijd in zitten :d

 

[rob1970]

Ik kijk vanavond. Bedankt weer tot zover

 

[rob1970]

Het is helemaal top. bedankt!!

 

[bron]

Graag gedaan :thumb: Suc6 met de site.

 

[rob1970]

toch weer iets heel vreemds

Ik heb de website inmiddels geupload.

De button heb ik van kleur veranderd in de kleur oranje.

Nu mailde de klant dat de button in Google Chrome op zijn windows laptop groen was. (zo had jij hem ook gemaakt)
In Microsoft Edge op zijn windows laptop is de button wel oranje zoals hij moet zijn.


Nu heb ik gekeken op mijn imac.
In safari en chrome is de button oranje zoals het moet.
Alleen in firefox is hij weer groen.

heb ik weer........


Het hele vreemde hieraan is ook dat hij bij chrome op een laptop groen is en op chrome op mijn imac gewoon oranje

schiet mij maar lek