Регистрация  |  Вход

Поломанные отступы

Использую кастомный лейаут,

скрин

Не поминаю, почему сам контейнер широкий, а внутри него всё скукожилось.

Вот код лейаута:

<aura:component implements="forceCommunity:themeLayout">
<aura:attribute name="search" type="Aura.Component[]"/>
<aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
<div class="slds-grid slds-grid--align-center">
<div class="slds-col">
<div class="slds-grid slds-grid--vertical">
<div class="slds-col">
<div class="logoContainer"></div>
</div>
<div class="slds-col">
{!v.search}
</div>
<div class="slds-col">
<c:verticalNav/>
</div>
</div>
</div>
<div class="slds-col content">
{!v.body}
</div>
</div>
</aura:component>

.THIS .logoContainer {
background-image: t('url(' + brandLogoImage + ')');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 99;
cursor: pointer;
position: relative;
max-width: 100%;
max-height: 52px;
display: block;
outline: 0;
height: 50px;
margin-top: 10px;
}

.THIS .slds-col .ui-widget {
margin: 6px;
}

.THIS .slds-col.content {
width: 1140px;
}

.THIS .container {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
position: relative;
max-width: 100%;
display: block;
outline: 0;
margin-top: 10px;
}

.THIS .container .text {
min-width: 100%;
}

Использую кастомный лейаут,

[url=https://ibb.co/JRqw4B5]скрин[/url]

Не поминаю, почему сам контейнер широкий, а внутри него всё скукожилось.

Вот код лейаута:

[code]<aura:component implements="forceCommunity:themeLayout">
    <aura:attribute name="search" type="Aura.Component[]"/>
    <aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
    <div class="slds-grid slds-grid--align-center">
        <div class="slds-col">
            <div class="slds-grid slds-grid--vertical">
                <div class="slds-col">
                <div class="logoContainer"></div>
                </div>
                <div class="slds-col">
                    {!v.search}
                </div>
                <div class="slds-col">   
                    <c:verticalNav/>                      
                </div>
            </div>
        </div>
        <div class="slds-col content">
            {!v.body}
        </div>
    </div>
</aura:component>[/code]

[code].THIS .logoContainer {
	background-image: t('url(' + brandLogoImage  + ')');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 99;
	cursor: pointer;
	position: relative;
	max-width: 100%;
	max-height: 52px;
	display: block;
	outline: 0;
	height: 50px;
	margin-top: 10px;
}

.THIS .slds-col .ui-widget {
   margin: 6px;
}
 
.THIS .slds-col.content {
   width: 1140px;
}

.THIS .container {
    background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	position: relative;
	max-width: 100%;
	display: block;
	outline: 0;
	margin-top: 10px;
}

.THIS .container .text {
	min-width: 100%;
}[/code]

Так по коду сложно сказать.
Ищи в консоли браузера в Element Inspector.
Наводи на input и textarea и смотри что за стили к ним применились. Возможно подвязалось что-то чего нет в твоих исходниках. Учишь пользоваться консолью браузера, при должной сноровке любые косяки со стилями находится на раз.

Так по коду сложно сказать. 
Ищи в консоли браузера в Element Inspector.
Наводи на input и textarea и смотри что за стили к ним применились. Возможно подвязалось что-то чего нет в твоих исходниках. Учишь пользоваться консолью браузера, при должной сноровке любые косяки со стилями находится на раз.