Avoid using pixel values for main layout. Bootstrap has it's own strong
layout grid system that works very well in most cases.
As you probably already know .container is an existing class in bootstrap
with it's on responsive px width's.
So there is no need to include the a fixed pixel width. Otherwise your
design will break.
To keep the grey border, In your file style.css change the class name
from .main.container
name to simply .main
.main{
1. border: 1px solid #EEE;
2. padding: 0px 30px;
}
Also the classes .footer and .titelbild will create problems because of
the fixed width values.
Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
On 4 November 2012 17:34, Juli87 <[email protected]> wrote:
> Thanks for your answer. But isn't there a possibility to create that
> container outline and the oversized image without giving a fixed width?
>
>
> Am Sonntag, 4. November 2012 14:09:56 UTC+1 schrieb Phil Doughty:
>
>> When possible try to use the existing bootstrap span grid classes
>> & remove the fixed width px values from these classes:
>>
>> .titelbild
>> .main.container
>> .footer
>>
>>
>>
>>
>>
>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
>>
>>
>>
>>
>>
>> On 4 November 2012 16:42, Juli87 <[email protected]> wrote:
>>
>>> I'm making a website with responsive design based on twitter bootstrap,
>>> but my responive design doesnt't work well... I oversize an image by giving
>>> a fixed width, so that it's outside the bootstrap grid. If i minimize the
>>> screen the image isn't fluid. Is there another possibility to extend the
>>> image and main container, so that it flows over the bootstrap grid? I want
>>> that the border of the main container has the same width like the oversized
>>> image. If I have the screensize of a smartphone the oversized border can be
>>> cut.
>>>
>>> My site how it looks like now:
>>> http://juli.beluto.com/test.**html <http://juli.beluto.com/test.html>
>>>
>>
>>
