Pagina over de hele breedte van het scherm

Door Peet Peterse op 17-01-2020 16:49 gewijzigd op 17-01-2020 17:02

2.886 views

Beste collega,

Ik heb een site bij ccvshop waar ik enigziens de css en sommige templates bestanden kunnen wijzigen (wat ik liever niet zomaar doe)

Bijna mijn alle paginas zijn iets van 2/5de van de scherm breed, ik verlies dus een hoop ruimte zowel aan de linke als de rechte zijde.

ik kan volgende bestanden inzien een aanpassen:

index.tpl
template.css
Scripts.js
Dictionary.sub.tpl

ProductCategory1.sub.tpl
ProductCategory2.sub.tpl
ProductCategory3.sub.tpl
ProductCategory4.sub.tpl

SubCategory1.sub.tpl
SubCategory2.sub.tpl

ik zie bij template.scc onderstaande code:


@media (max-width: 992px) {
    .sidebar-offcanvas {
        float: none;
        display: block;
    }
}

@media (min-width: 992px) {
    input#SearchField,
    input#SearchField2 {
        width: 280px !important;
    }
    }

@media (min-width: 1200px) {
    input#SearchField {
        width: 320px !important;
    }
}

@media (max-width: 992px) {
    .martoni-login-topbar .login-label {
        display: none;
    }
    .martoni-search {
        float: none !important;
        position: relative;
        margin-top: 10px;
    }
    .martoni-left-nav {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .martoni-language,
    .martoni-usp,
    .martoni-login,
    .martoni-ft-powered {
        display: block;
        text-align: left !important;
        float: none !important;
        margin: 0 !important;
        padding-bottom: 5px;
    }
    .martoni-login {
        left: 0;
    }
    .martoni-search-button {
        right: 0 !important;
    }
}

Sorry voor mijn lange verhaal maar wou het wat duidelijker neerzetten.

Graag zie ik jullie hulp tegemoet.

Alvast bedankt voor de moeite.

- Ariën -

17-01-2020 16:55 gewijzigd op 17-01-2020 16:56

Ik vermoed dat er een container-element in je index.tpl staat, welke je met CSS de juiste breedtte kan maken.

PS: Kan je jouw code tussen code-tags zetten?

P Peet Peterse

17-01-2020 17:47

Dag Arien,
Ja ik kan alle bovengenoemde bestanden aanpassen, opslaan en laten uitvoeren, althans zonder fout in de nieuwe code anders de site gaat er onderuit.
Ik heb al een backup van deze bestanden dus maak me geen zorgen.
Heeft u een suggestie hoe het moet?
Alvast bedank

- Ariën -

17-01-2020 17:55

Is er geen sandbox-mode? Je wilt immers niet live werken ;-)

Laat de relevante code eens zien over de opbouw van je site. En als het kan ook een URL.

P Peet Peterse

17-01-2020 17:55 gewijzigd op 18-01-2020 12:24

hier ssn stukje code uit Index.tpl
er wordt met pixels gewerkt.

#navbar {
display: block;
margin-bottom: -15px !important;
}

.col-md-9 .img-container1,
.col-md-9 .img-container2,
.col-md-9 .img-container3,
.col-md-12 .img-container1,
.col-md-12 .img-container2,
.col-md-12 .img-container3,
.col-xs-12 .img-container1,
.col-xs-12 .img-container2,
.col-xs-12 .img-container3 {
height: 380px !important;
}

[size=xsmall]Toevoeging op 17/01/2020 17:57:27:[/size]

- Ariën -

17-01-2020 18:22

Blijkbaar wordt er gebruik gemaakt van een grid-framework, zoals Bootstrap. Dan kan je met de juiste classes je grid-'table' aanpassen.

P Peet Peterse

17-01-2020 21:53

ja sorry met pixel bedoelde ik Grid.
maar hoe en waar kan ik het doen, heb je enig idee Arien?

- Ariën -

17-01-2020 22:54 gewijzigd op 17-01-2020 22:55

Maak van:

class="container"

dit:

class="container-fluid"

En je pagina wordt over de hele breedte getoond.

P Peet Peterse

18-01-2020 12:23

Beste Arien,
Dank voor je reactie, het werkt perfect.
Fijne dag verder :P)

[size=xsmall]Toevoeging op 19/01/2020 02:04:16:[/size]

beste arien,
kan de breedte van mijn scherm ietsje kleine worden bv zoals deze site:
https://www.maxshopping.nl/slapen/

Reageren

Inloggen om te reageren