Jump to content

Как изменить масштаба текста в мобильной версии?


Арон

Recommended Posts

Вечер добрый.

Подскажите пожалуйста - как изменить масштаб текста (размер шрифта) в мобильной версии сайта? С полной версией -  в принципе понятно - через админ панель и редактирование размера шрифтов через визуальный редактор. Но вот все внесенные изменения размера шрифта - на мобильной версии никак не сказывается. Без изменений.

В core_responsive.css нашел такой кусок

			content: attr( data-voteText );
			font-size: 13px;

Внес изменения, поменял font-size: 13px; на свой шрифт font-size: 16px; - но размер шрифта не изменяется, а только искрывляется див-блок.

Подскажите - где копать чтобы изменить размер шрифта контента в мобильной версии сайта?

Link to comment
Share on other sites

46 минут назад, Арон сказал:

В core_responsive.css нашел такой кусок


 

Вам нужно смотреть в forum_responsive.css смотреть, все там

Только ещё не пойму, зачем на мобильном то делать 16px?????? Для мобилок от 13 до 15px используется для заголовков, чаще 13, а вы собрались 16 для основного текста??

Link to comment
Share on other sites

Elhombre на мобильных версиях всех сайтов ips почему то шрифт контента - слишком мелкий. Вот и интересуюсь, как это можно изменить... размер шрифта, я для примера привел. Во всяком случае - на полной версии по умолчанию 13шрифт. Я его изменил на 15.

Пойду искать forum_responsive.css.

Link to comment
Share on other sites

Elhombre в forum_responsive.css.

	.cTopicList .cBestAnswerIndicator {
		width: 18px;
		height: 18px;
		line-height: 18px;
		font-size: 11px;
	}

Изменяю 11рх на 13 - никаких изменений в плане шрифта.

Подскажите, что я делаю не верно. Вроди size должно отвечать за шрифт - но не помогает. Кеш обновлял.

Link to comment
Share on other sites

Арон вот эта строчка отвечает за общий размер

@media screen and (max-width: 767px)
body {
    font-size: 13px;
}

 

1 час назад, Арон сказал:

Elhombre на мобильных версиях всех сайтов ips почему то шрифт контента - слишком мелкий. Вот и интересуюсь, как это можно изменить... размер шрифта, я для примера привел. Во всяком случае - на полной версии по умолчанию 13шрифт. Я его изменил на 15.

Пойду искать forum_responsive.css.

В команде invisioncommunity топ-дизайнеры и нынешние версии IPS относительно UI и UX очень продуманы и сделаны по стандартам дизайна, которые используются абсолютно везде и у всех, даже в топ-компаниях

Link to comment
Share on other sites

27 минут назад, Elhombre сказал:

@media screen and (max-width: 767px) body { font-size: 13px;

Это точно в  forum_responsive.css?

Здесь только


/* PHONES */
@media screen and (max-width: 767px) {
	/* Forum grid layout */
	.ipsForumGrid{
		--ipsForumGrid--width: 200px;
	}

 

36 минут назад, Elhombre сказал:

В команде invisioncommunity топ-дизайнеры и нынешние версии IPS относительно UI и UX очень продуманы и сделаны по стандартам дизайна, которые используются абсолютно везде и у всех, даже в топ-компаниях

Со слабым зрением с таким размером шрифта долго не посидишь. Да и на сайтах топ компаниях - заходят лишь за справкой, а не чтением статей.

Link to comment
Share on other sites

14 минут назад, Арон сказал:

Со слабым зрением с таким размером шрифта долго не посидишь. Да и на сайтах топ компаниях - заходят лишь за справкой, а не чтением статей.

У Вас целевая аудитория слабовидящих? Если да, то ок. Если нет, то это менее 1% ваших посетителей.

Почитайте или посмотрите про азы дизайна, а точнее будет разработки мобильного дизайна и поймете, о чем я говорю

15 минут назад, Арон сказал:

Это точно в  forum_responsive.css?

 

Я уже скинул Вам всю строчку стиля, что нужно найти. Пользуйтесь поиском по CSS файлам в админке.

Link to comment
Share on other sites

10 часов назад, Elhombre сказал:

Я уже скинул Вам всю строчку стиля, что нужно найти. Пользуйтесь поиском по CSS файлам в админке.

Не нашел даже через поиск данную строчку



@media screen and (max-width: 767px) body { font-size: 13px;

 

Link to comment
Share on other sites

Desti спасибо за подсказку - пошел искать. Странно что поиск не находит. Визуально буду искать.

Link to comment
Share on other sites

Desti Elhombre благодарю вас за уделенное время и подсказку. Но только шрифт увеличился совсем не тот, который нужен. Вот пример до и после - размер шрифта контента остался не изменным. Изменился технический шрифт "Опубликованно..."

Снимок экрана (1810).png

Снимок экрана (1809).png

Link to comment
Share on other sites

Я не вдавался в детали, показал, просто показал, где это живет. Там же и размер шрифта для конкретного класса сообщения можно поискать. 

Link to comment
Share on other sites

4 часа назад, Desti сказал:

конкретного класса сообщения можно поискать. 

Открыл исходный код в браузере

<div class='cPost_contentWrap'>
		<div data-role='commentContent' class='ipsType_normal ipsType_richText ipsPadding_bottom ipsContained' data-controller='core.front.core.lightboxedImages'>
			<p>
	Когда мы слышим "Ростов" текст контента.........

Какой класс будет отвечать и в css где его искать?

Перепробовал пост.css, контент_пост.css  - менял шрифты. Не изменяет. Не то.

Link to comment
Share on other sites

Не надо открывать исходный код, нет там ничего интересного, надо F12 жать и смотреть в код и связанный css. Где-то есть такая конструкция, этот класс отвечает за размер фонта

@media screen and (max-width: 767px)
.ipsType_normal {
   font-size: 13px;
}

Link to comment
Share on other sites

8 часов назад, Desti сказал:

Не надо открывать исходный код, нет там ничего интересного, надо F12 жать и смотреть в код и связанный css.

f12 нужно еще научиться пользоваться...

 

7 часов назад, Desti сказал:

fon1.jpg.ddb2a044eda03d8e0b0c994fc86fcf08.jpg

Благодарю - пойду искать.

Link to comment
Share on other sites

Desti Что-то в дефолтном шаблоне, в файле typography.css такого не нахожу

Спойлер

/* HEADINGS */

.ipsType_pageTitle,
.ipsType_sectionTitle,
.ipsType_secondaryTitle,
.ipsType_sectionHead,
.ipsType_minorHeading {
    {{if theme.headline_font != 'default'}}
        font-family: "{theme="headline_font"}", "Helvetica Neue", Helvetica, Arial, sans-serif;
    {{endif}}
}

/* ======================================================== */
/* Page title: the large text shown at the top of pages */
.ipsType_pageTitle {
    font-size: {fontsize="2x_large"};
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0;
    color: rgb( var(--theme-text_dark) );
}

    .ipsType_pageTitle > .fa {
        font-size: {fontsize="large"};
    }

    .ipsType_pageTitle a:not( .ipsBadge ):not( .ipsButton ) {
        color: inherit;
    }

/* ======================================================== */
/* Section title: formerly known as main title, the bar separating sections */
.ipsType_sectionTitle {
    font-size: {fontsize="base"};
    line-height: 1;
    font-weight: bold;
    padding: var(--sp-4) var(--sp-5);
    margin: 0;
    background: rgb( var(--theme-section_title) );
    color: rgb( var(--theme-section_title_font) );
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: 1px solid rgba( var(--theme-text_light), 0.15 );
}
    
    a.ipsType_sectionTitle, .ipsType_sectionTitle a {
        color: rgb( var(--theme-section_title_font) );
    }

    .ipsType_sectionTitle .ipsButton {
        position: relative;
        top: -5px;
    }

        .ipsType_sectionTitle .ipsButton.ipsButton_veryVerySmall {
            top: -2px;
        }

    .ipsType_sectionTitle > .ipsType_light {
        opacity: 0.6;
    }

/* ======================================================== */
/* Secondary title: a secondary version of above, for sub-sections */
.ipsType_secondaryTitle {
    font-size: {fontsize="small"};
    font-weight: 400;
    padding: 10px 15px 10px 15px;
    margin-top: 0;
    border-radius: 3px 3px 0 0;
    background: rgb( var(--theme-secondary_title) );
    color: rgb( var(--theme-secondary_title_font) );
}

    a.ipsType_secondaryTitle, .ipsType_secondaryTitle a {
        color: rgb( var(--theme-secondary_title_font) );
    }

/* ======================================================== */
/* Section heading: a text-based heading for smaller sections */
.ipsType_sectionHead {
    font-size: {fontsize="large"};
    color: rgb( var(--theme-text_dark) );
    line-height: {fontsize="2x_large"};
    font-weight: bold;
    display: inline-block;
    margin: 0;
}

/* ======================================================== */
/* Minor heading: used in miscellanious situations */
.ipsType_minorHeading {
    color: rgb( var(--theme-text_light) );
    text-transform: uppercase;
    font-size: {fontsize="x_small"};
    margin: 0;
}

/* ======================================================== */
/* ALIGNMENT */
.ipsType_center {
    text-align: center;
}

.ipsType_left {
    text-align: left;
}
html[dir="rtl"] .ipsType_left {
    text-align: right;
}

.ipsType_right {
    text-align: right;
}
html[dir="rtl"] .ipsType_right {
    text-align: left;
}
.ipsType_justify {
    text-align: justify;
}

/* ======================================================== */
/* MISC */
.ipsType_bold {
    font-weight: bold;
}

.ipsType_unbold {
    font-weight: normal;
}

.ipsType_monospace {
    font-family: monospace;
}

.ipsType_noBreak {
    white-space: nowrap !important;
}

.ipsType_noUnderline {
    text-decoration: none !important;
}

.ipsType_withHr {
    display: flex;
    align-items: center;
}

    .ipsType_withHr:after {
        content: '';
        border-top: 1px solid rgba( var(--theme-text_dark), 0.1 );
        height: 0;
        flex-grow: 1;
    }

    html[dir="ltr"] .ipsType_withHr:after {
        margin-left: 10px;
    }
    html[dir="rtl"] .ipsType_withHr:after {
        margin-right: 10px;
    }

.ipsType_resetLh {
    line-height: 1;
}

/* This class sometimes contains truncated text. A max-width is necessary for the text to truncate */
.ipsContained_container{
    max-width: 100%;
}

/* 09/20/16 - Chrome on Windows breaks non-english characters in a word. I traced it back
to the combination of word-break and word-wrap properties. After extensive testing, all modern
browsers appear to work with just word-wrap: break-word, so I have removed the word-break property.
See: r12524 & r12586 & r12382 */
.ipsType_break {
    word-wrap: break-word;
    word-break: break-word;
}

.ipsType_richText {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
}

/* Prevent long content such as code blocks from stretching the layout */
.ipsType_richText.ipsContained,
[data-role="editorComposer"]{
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* 02/10/16 - Fixes an issue with Android 4, where links would not break. See r12945 */
@media screen and (max-width: 767px) {
    _:-webkit-full-screen, :root .ipsType_break {
        word-break: break-word;
    }
    _:-webkit-full-screen, :root .ipsType_richText {
        word-break: break-word;
    }
}
    
    .ipsType_normal.ipsType_richText {
        line-height: 1.6;
    }

        {{if (int) settings.editor_paragraph_padding === 0}}
            .ipsType_richText p:not( [class] ) {
                margin-top: 0;
                margin-bottom: 0;
            }
        {{endif}}

    .ipsType_richText a,
    .ipsApp [data-ipsEditor] .cke_wysiwyg_div a {
        text-decoration: underline;
    }

        .ipsType_richText .ipsForm a {
            text-decoration: none;
        }
    
    /* In some places (like in Pages) we use <ul>s for structural things which aren't really lists, which
        causes the bullet points to be one level "deeper" than thewy really are. This fixes that */
    .ipsType_richText > ul:not([class]) { list-style-type: disc; }
    .ipsType_richText > ul:not([class]) ul { list-style-type: circle; }
    .ipsType_richText > ul:not([class]) ul ul { list-style-type: square; }

/* Makes links go the color of surrounding text */
a.ipsType_blendLinks, .ipsType_blendLinks a {
    color: inherit;
}

/* Add brand color to links */
.ipsType_brandedLinks a,
a.ipsType_brandedLink{
    color: rgb( var(--theme-brand_primary) );
}

.ipsType_reset {
    margin: 0;
}

/* I LIKE SHOUTING */
.ipsType_uppercase {
    text-transform: uppercase;
}

.ipsType_noLinkStyling, .ipsType_noLinkStyling:hover {
    text-decoration: none !important;
    color: rgb( var(--theme-text_color) );
}

/* Highlighted words (e.g. search results) */
mark {
    background: rgba( var(--theme-featured), 0.1 );
    padding: 0 5px;
    color: rgb( var(--theme-featured) ) !important;
    font-weight: inherit;
    display: inline-block;
    border-radius: var(--radius-1);
}

/* ======================================================== */
/* SIZING */
.ipsType_small {
    font-size: {fontsize="x_small"};
}

    .ipsType_small:not( .ipsType_richText ){
        line-height: 1.45;
    }

.ipsType_medium {
    font-size: {fontsize="small"};
}
    
    .ipsType_medium:not( .ipsType_richText ) {
        line-height: 1.53;
    }

.ipsType_normal {
    font-size: {fontsize="medium"};
}
    
    .ipsType_normal:not( .ipsType_richText ){
        line-height: 1.5;
    }

.ipsType_large {
    font-size: {fontsize="base"};
}

    .ipsType_large:not( .ipsType_richText ){
        line-height: 1.25;
    }

.ipsType_veryLarge {
    font-size: {fontsize="36"};
    line-height: 1.18;
    font-weight: bold;
    letter-spacing: -0.9px;
    color: rgb( var(--theme-text_dark) );
}

.ipsType_huge {
    font-size: {fontsize="64"};
    line-height: 1.11;
    font-weight: 300;
    color: rgb( var(--theme-text_dark) );
}

/* ======================================================== */
/* COLORS */
.ipsType_light {
    color: rgb( var(--theme-text_light) );
}

.ipsType_dark {
    color: rgb( var(--theme-text_dark) );
}

.ipsType_warning, .ipsType_negative {
    color: var(--negative-dark);
}

.ipsType_spammer {
    color: var(--negative-dark);
}

.ipsType_issue {
    color: #d69625;
}

.ipsType_success, .ipsType_positive {
    color: var(--positive-dark);
}

.ipsType_neutral {
    color: rgb( var(--theme-text_light) );
}

.ipsType_code {
    background: rgb( var(--theme-area_background_light) );
    padding: 5px;
    border: 1px solid rgb( var(--theme-area_background) );
    border-radius: var(--radius-1);
    color: #d72f42;
}

/* ======================================================== */
/* RICH TEXT */
.ipsType_richText > p:first-child {
    margin-top: 0;
}

.ipsType_richText > p:last-child {
    margin-bottom: 0;
}

.ipsType_richText img {
    max-width: 100%;
}

/* ======================================================== */
/* TRUNCATED TEXT */
.ipsTruncate {
    overflow: hidden;
}

    .ipsTruncate.ipsTruncate_line {
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
    }

    a.ipsTruncate.ipsTruncate_line,
    span.ipsTruncate.ipsTruncate_line {
        display: inline-block;
        vertical-align: middle;
    }

    /* Use the clamp method for these situations since they're stretchy table-cells */
    .ipsWidget .ipsDataItem_main .ipsTruncate_line{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

.ipsTruncate + .ipsTruncate_more {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
    padding: 12px;
    text-align: center;
    margin-bottom: -15px;
    font-size: {fontsize="small"};
}

    .ipsTruncate > .ipsTruncate_more span {
        z-index: 40;
    }

.ipsType_pageTitle [data-role="editableTitle"]:hover,
.ipsType_pageTitle[data-role="editableTitle"]:hover,
.ipsType_editable:hover {
    background: rgb( var(--theme-selected) );
    color: rgb( var(--theme-text_dark) );
}

 

Изиняюсь.

Я изначально не тот typography.css открыл.

Нашел.))

Link to comment
Share on other sites

Desti Спасибо за помощь. Получилось увеличить размер шрифта контента)).

Только не пойму, как вы так в такой огромной куче файлов css находите нужный файл... ???

смайл.gif

Link to comment
Share on other sites

Я в "битве экстрасенсов" только третье место занял, пришлось в админы переквалифицироваться. 

Link to comment
Share on other sites

12 часов назад, Desti сказал:

надо F12 жать и смотреть в код и связанный css.

Поясните пожалуйста на данном примере, как пользоваться f12 - чтобы узнать это значение?

@media screen and (max-width: 767px)
.ipsType_normal {
   font-size: 13px;
} 

 

Link to comment
Share on other sites

Я же написал, смотрите по классу, на моем скриншоте выделено голубым в коде. А вы в body ткнули и что-то найти хотите. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...