theme . scss Venture help

[phil_CM]

I am trying to change this to 100%:

@media only screen and (min-width: 750px)
.medium-up--one-half {
 width: 50%
-ms-flex-preferred-size: 50%;
 -webkit-flex-basis: 50%
-moz-flex-basis: 50%;flex-basis: 50%;
}

from what I can tell these figures are set by a variable

$width

where is this set? is there a way I can override these setting to make the div 100% width

[KetanKumar]

@phil_CM 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.\

also can you please share more details about what do you want exctaly?

[phil_CM]

Pretty much exactly as I stated above. On the venture theme the css is being dynamically generated. The 50% values are set by the variable $width. I just want to know where this value 50 is being defined. Or any only variable in the style sheet file for that matter as there is loads like that where for example there will be a variable multiplied by 2 or three or divider by etc.

[suyash1]

@phil_CM - you can control+f on your scss file to get where exactly $width is set, many times variables are set on top of the file, or at the start of the media query.

If you find it really difficult then can you please add me to staff? I will find it

[phil_CM]

I did that. It is only being used not being defined which is why I needed to ask where it was being defined. 
thanks 

[suyash1]

@phil_CM - then it might have been set from customize section. Please open that page in customizer and check if you have any option to change width for it. 

[phil_CM]

I checked there too, also can’t see anything that looks like it would be set. Are you familiar with the venture theme?

[suyash1]

@phil_CM - yes, can you please add me to staff? I will check it

[phil_CM]

No I can’t. If you are not familiar with venture or don’t have access to one to see yourself I’ll wait and see if someone else does. Thanks though!

[tim · Accepted solution]

It's done with mixins, and the code you're trying to modify is produced with several mixins including each-other.

Here is the mixin definition -- see where $width is  referenced from and how it includes another mixin to output prefixed properties: 

@mixin flex-basis($width: auto) {
  -ms-flex-preferred-size: $width;
  @include prefix(flex-basis, $width, webkit moz spec);
}

Here is how it can be used (simplified, not actual code from the theme) :

  .one-half {
    width: percentage(1/2);
    @include flex-basis(percentage(1/2));
  }

 And this is the result (example):

.one-half {
   width: 50%
   -ms-flex-preferred-size: 50%;
   -webkit-flex-basis: 50%
   -moz-flex-basis: 50%;
   flex-basis: 50%;
}

In your stylesheet it's even more complex, plus these classes are used in many places throughout your theme, that's why I do not recommend fiddling with these codes -- you risk completely destroying your storefront. (do a backup theme copy at least!).

If you need to make an element to fill its parent entire width, simply replace class medium-up--one-half  with one-whole for this element.