Mobile Grid Version

Question

Hey all,

why in mobile version the attributes are bold and in desktop version they are regular? I want regular text everywhere - no bold. Furthermore I want smaller check boxes within the mobile version, the text doesn't need so much space.

What should I try?

Comments

I'm not aware of such mobile behavior with bolded texts.  Do you have some specific grid settings turned on or have you added some custom CSS to the question that might be involved?

---

No nothing, the response options are bold per default
I don't know how to change this to regular even if I add a script into the options

<span style="font-style: normal;">Normal</span>

it stays bold

---

It would be "font-weight" that you want to change rather than "font-style," but whether or not that will fix the problem may depend on what is making the labels bold at all.  Would it be possible for you to send in a study demonstrating this behavior to our support team so we can take a better look?

---

Will do that!

---

Ahhh the reason should be my custom style in the whole study.

Maybe you could tell me what I have to change within the code.

@font-face 
{
  font-family: 'source_sans_proregular';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('source-sans-pro-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face 
{
  font-family: 'source_sans_prosemibold';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('source-sans-pro-v13-latin-600.woff2') format('woff2'), 
       url('source-sans-pro-v13-latin-600.woff') format('woff');
}

@font-face 
{
  font-family: 'source_sans_probold';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
       url('source-sans-pro-v13-latin-700.woff2') format('woff2'), 
       url('source-sans-pro-v13-latin-700.woff') format('woff'); 
}

html, body
{
    background-color: #eaeaea;
    font:18px/28px "source_sans_proregular", Arial, Helvetica, sans-serif;
    color: #000000;
}

.page
{
    margin-top: 50px;
    padding: 0;
    background-color: #ffffff;
    -webkit-box-shadow: 8px 8px 15px 0px #666666;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    8px 8px 15px 0px #666666;  /* Firefox 3.5 - 3.6 */
    box-shadow:         8px 8px 15px 0px #666666;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.text_nav_button
{
    background-color: #4EA582;
    color: #ffffff;
    border-width: 0;
}

.page_header
{
    color: #ffffff;
    font:42px "source_sans_probold", Arial, 'Helvetica Neue', Helvetica, sans-serif;
    padding: 30px 50px;
    background-color: #4EA582;
    margin: 0px;
}

.header1
{
    color: #0096c7;
    font:20px "source_sans_prosemibold", Arial, 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.5em;
}

a, a:visited
{
    color: #0096c7;
}

.question
{
    padding: 20px 50px 10px 50px;
    margin: 20px;
}

.sans_bold, strong, b, .rank_container_label
{
    font-family: "source_sans_probold", Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.progress_bar_inner
{
    background-color: #4EA582;
}

.progress_bar_outer
{
    background-color: #c7c9ca;
}

.label_text
{
    color: #0096c7;
    font:18px/28px "source_sans_probold", Arial, 'Helvetica Neue', Helvetica, sans-serif;
    padding-right: 20px;
}

.alt_color1
{
    background-color: #eaeaea;
}

.alt_color2
{
    background-color: #ffffff;
}

.cbc .input_cell
{
    background-color: #ffffff;
}

.cbc .level_text_cell, .cbc .row_label_cell
{
    vertical-align: middle; 
}

html .task_select_button
{
    line-height: 18px;
}

/*CBC Best*/
.cbc_concept.best .best_button,
.cbc_concept.discrete.best .task_select_button,
.dual_response_none_button.would_button.selected,
.custom_position_none.best .best_button
{
    background-color: #00C700;
    border-color: #00C700;
}

.cbc_concept.best
{
    border-color: #00C700;
}

.nav_dot.best
{
    background-color: #00C700;
}

/*CBC Worst*/
.cbc_concept.worst .worst_button,
.dual_response_none_button.would_not_button.selected,
.custom_position_none.worst .worst_button
{
    background-color: #E8001B;
    border-color: #E8001B;
}

.cbc_concept.worst
{
    border-color: #E8001B;
}

.nav_dot.worst
{
    background-color: #E8001B;
}

.inner_table table .input_cell, .freeformat .input_cell
{
    padding-top: 7px;
}

.graphical_next_button
{
    cursor:pointer;
    background:url(sprite.png) no-repeat -43px 2px;
    width: 38px;
    height: 38px;
}

.graphical_previous_button
{
    cursor:pointer;
    background:url(sprite.png) no-repeat 0 2px;
    width: 38px;
    height: 38px;
}

.question_errors 
{
    padding: 5px;
}

.page_error, .server_verification_error
{
    font:18px/28px "source_sans_probold", Arial, Helvetica, sans-serif;
    margin-left: 15px;
}

.carousel_prev 
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15167 -2035 24 28'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7B fill: %230096c8; %7D%3C/style%3E%3C/defs%3E%3Cpath id='Left_task_arrow' data-name='Left task arrow' class='cls-1' d='M-15143-2035v28l-24-13.917z'/%3E%3C/svg%3E");
}

.carousel_next 
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15123 -2035 24 28'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7B fill: %230096c8; %7D%3C/style%3E%3C/defs%3E%3Cpath id='Right_task_arrow' data-name='Right task arrow' class='cls-1' d='M-15123-2035l24 13.917-24 14.083z'/%3E%3C/svg%3E");
}

.nav_dot.active 
{
    border-color: #0096c7;
}

@media only screen and (max-width: 940px) 
{
    .page
    {
        -webkit-box-shadow: none;
        -moz-box-shadow:    none;
        box-shadow:         none;
    }
}

@media only screen and (max-width: 800px) 
{
    body .page_header
    {
        text-align: left;
        font: 32px "source_sans_probold", Arial, 'Helvetica Neue', Helvetica, sans-serif;
        padding: 20px;
    }

    body .page
    {
        margin-top: 0;
    }

    .question
    {
        padding: 0;
    }

    .question.cbc .header1,
    .question.cbc .header2,
    .question.cbc .footer
    {
        margin-left: 20px;
        margin-right: 20px;
    }
}
.cbc, .task_select_button,
.dual_response_none_button
{
    padding: 0px 0px;
}

---

I'm still not seeing bolded text, I'm afraid.