Automatically resize the page width

**balki** · 05-08-2017, 06:59 PM

Hello!

I have the following problem. I have a global style that is not resized in the mobile version of the site.
This is the style:

HTML Code:

<style>.page-t, .fullco {background:#5590cc;}.conte {width:883px; background:#eaeaea; position: relative; border:1px solid #d1d1d1; margin:0; padding:10px 20px; -webkit-border-radius: 0px 0px 8px 8px; border-radius: 6px 6px 6px 6px; -webkit-box-shadow: inset 0px 0px 9px 5px rgba(0, 0, 0, 0.02); box-shadow: inset 0px 0px 9px 5px rgba(0, 0, 0, 0.02); -webkit-box-shadow:  0px 4px 0px 0px rgba(0, 0, 0, 0.1); box-shadow:  0px 4px 0px 0px rgba(0, 0, 0, 0.1);}.page-t {width:883px; font-size:26px; color:#fff; margin: -11px 0 20px -20px; -webkit-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; padding:10px 20px;}</style><style>.calendar{margin:.50em 16px 10px 0;padding-top:10px;float:left;width:66px;background:#ededef;background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); background: -moz-linear-gradient(top,  #ffffff,  #ffffff); font:bold 16px Arial Black, Arial, Helvetica, sans-serif;text-align:center;color:#000;text-shadow:#fff 0 1px 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;position:relative;-moz-box-shadow:0 2px 2px #888;-webkit-box-shadow:0 2px 2px #888;box-shadow:0 2px 2px #888;}.calendar em{display:block;font:normal bold 11px/24px Arial, Helvetica, sans-serif;text-transform:uppercase;color:#fff;text-shadow:#00365a 0 -1px 0;background:#04599a;background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); background:-moz-linear-gradient(top,  #04599a,  #00365a); -moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;border-top:1px solid #00365a;}.calendar:before, .calendar:after{content:'';float:left;position:absolute;top:4px;width:6px;height:6px;background:#111;z-index:1;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 1px 1px #fff;-webkit-box-shadow:0 1px 1px #fff;box-shadow:0 1px 1px #fff;}.calendar:before{left:7px;}.calendar:after{right:7px;}.calendar em:before, .calendar em:after{content:'';float:left;position:absolute;top:-3px;width:2px;height:10px;background:#dadada;background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); z-index:2;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.calendar em:before{left:9px;}.calendar em:after{right:9px;}</style>

This is the site: http://www.souhssz.com/tjestova/question/
I know the problem is this:

HTML Code:

width:883px;

I tried to set the width in percent (87%), but the design shifted.
Please help me make the mobile version display the content correctly.

**jundo12** · 05-08-2017, 10:20 PM

did you try different percentages? i just tinker with it till it fits. like you can use decimals. for example, 87.2%
or 86.5%, etc.

**balki** · 05-09-2017, 06:30 AM

Blue background becomes shorter and looks bad.

**jundo12** · 05-09-2017, 06:56 AM

i'm looking at it with iphone 5. it resizes if you mean the blue bar at the top of the text

**jundo12** · 05-09-2017, 07:00 AM

if you mean the background image behind everything. do you mean this:

background: #e2e5e8 url("https://lh6.googleusercontent.com/-tuM25buM760/UvH0LR6bGeI/AAAAAAAAEzQ/WGRhVEqX_3w/s695/bg.png") repeat center top;

that one?

**simonf** · 05-09-2017, 11:11 AM

Hi

Did you try putting this at the top of the html page??

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

just after the initial <head> tag

Also take a look at https://developer.mozilla.org/en-US/..._media_queries for the @media formats

rgds, Simon

**balki** · 05-09-2017, 07:04 PM

Originally Posted by jundo12

if you mean the background image behind everything. do you mean this:

background: #e2e5e8 url("https://lh6.googleusercontent.com/-tuM25buM760/UvH0LR6bGeI/AAAAAAAAEzQ/WGRhVEqX_3w/s695/bg.png") repeat center top;

that one?

Hello,
I'm talking about the blue background of the title. The percentages are different in the mobile version and the other version, and this displacement length.

Originally Posted by simonf

Hi

Did you try putting this at the top of the html page??

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

just after the initial <head> tag

I put it in the head part, but I do not know if I got to the top position. Unfortunately nothing changed.

Originally Posted by simonf

Also take a look at https://developer.mozilla.org/en-US/..._media_queries for the @media formats

rgds, Simon

This is too complicated for me and I can not handle it.

I tried the following:
I replaced width:883px; with width:100%;. Then I put the site content into this: <div style="width:95.5%;"></div>. That looks good, but the mobile version is shrinking. I'm still looking for a working way for both versions to fit into the screen.
Regards!

**jundo12** · 05-09-2017, 10:31 PM

are you using google chrome?

**balki** · 05-10-2017, 06:50 PM

Only Firefox and Opera.

**jundo12** · 05-10-2017, 08:35 PM

this keeps the text in divs and such, responsive
just change the number to suit you.

<style>
p {
font-size: 3vmin;
}
div {
font-size: 2.6vmin;
}

</style>

Thread: Automatically resize the page width

Thread Tools

Search Thread