Log in

View Full Version : Automatically resize the page width


balki
05-08-2017, 06:59 PM
Hello!:D
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:

<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:

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??


<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/docs/Web/CSS/Media_Queries/Using_media_queries for the @media formats

rgds, Simon
balki
05-09-2017, 07:04 PM
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.


Hi

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


<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.


Also take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_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 (http://m.souhssz.com/tjestova/question/) 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>
balki
05-10-2017, 09:29 PM
Hello,
It did not work. This code simply specifies the overall text size in the paragraph (Including the main menu). In fact, the problem is that div does not fit into the page.

Is it possible to specify the div size in pixels, but at the same time it can shrink when the screen shrinks, as is the case with the mobile version?
jundo12
05-11-2017, 07:30 AM
you can define it in percentage. not sure about pixels. depends on the rest of the css. if there's something else controlling the size of the div, in percentage, the pixel size will go along for the ride. i don't know the actual rules of css, i just keep tinkering with numbers till it works. sometimes pixels will resize because somewhere in the css, the dimensions in question, are already effected by percentage, in just such a way that the two things (percentage and pixel) can work together. there's also vmin which is specific (but not isolated to) to controlling the views in handheld devices. that's why the other person in the thread linked you to the page on media queries. what they basically do is give you a way to provide different settings for different devices by simply copying and pasting the relevent media queries you're interested in, to the css for the page. similar in concept to building a page for each browser type, etc, yet much simpler.

the reason i asked about your browser is, google chrome has a developer mode where you can view the site in various devices. i looked at your site in iphone 5 mode and it looked fine to me.

what i do is find each case where a pixel is listed, and change it to percentage. reload to see result and refine it from there. in some cases, the thing resists percentage and as a result will break the layout (like some javascripts will resist percentage, some css3 also). so always a good idea to save as test page first so you don't ruin your original page.
balki
05-11-2017, 07:13 PM
Thanks for the reply.
I have a small problem only in the mobile version, when I use the settings as I described them:
6173
Mobile version (The right edge is cut off):
6174

If I decreases the percentages, then the mobile version is accurate, but the full version is shrinking.