Add full screen blocks

b82d262e

How do I create blocks to the Blank template that span the will width of the screen?
1 fixed to the top for social icons and a few throughout the main page for images?

aman204

b82d262e Quick way could be adding this to custom.css file :

.container{width:100% !important:}

All the blocks are wrapped around container div with specific width property added to the same.

If you want to have the layout customization done precisely for some specific block, You can let us know so as to check the code inheritance and suggest changes for the same

For creating new block or module position, You may refer to this documentation

b82d262e

aman204 I will try this now, thank-you

b82d262e

Works at the top - thanks. Except, how do I remove the space between the page and the icon bar (indicated by the red-arrow)?

b82d262e

Got it sorted. apologies, my css mistake.

b82d262e

I can get the social bar at the top to stick in the correct place, but how do I keep it on top of other stuff as the page goes down?

saguaros

b82d262e
You will need to add some customization in CSS to achieve this.

paulus1031

With the page linked to - it has these media queries for the container width

@media (min-width: 1200px) {
.container {width: 1170px;}
}

@media (min-width: 992px) {
.container { width: 970px;}
}

@media (min-width: 768px)
.container {
width: 750px;
}

paulus1031

Looking at the page I do notice the image is breaking the layout

You might want to try something like this

img {
max-width: 100%;
height: auto;
}