Layouts changing drastically in mobile view - html

I have This site
It looks okay in normal browser from PC.
But whenever I switch to mobile view from inspect, it looks like this
http://azlily.bex.jp/eccube_1/html/
2: https://i.stack.imgur.com/uSHAe.png
Should I implement Media screen indivisually for all components in website? If Yes, then Why is title and some components are fit in mobile view.

You dont need to implement media screen for every item present. the trick is to make it responsive from the ground up, and then just make small alterations to the layout as it shrinks down if still needed. For example, take this news_area div section. You have it positioned in the center of its parent container - news_contents. But dont use fixed margins to center it, you want add css so that it stays in the center even when it shrinks down.
example:
.news_contents {
width: 100%;
margin: 0;
padding: 0;
}
#news_area {
width: 90%;
background: #d9d9d9;
margin: 30px auto!important;
}
[note:the !important tag is only needed here to override some of your existing css. Also this is just a rough example to show you the layout.]
With this added to your css, the news_area will always be centered in its parent div, and always have space either side. This is what i mean by coding it with a responsive design from the start. This section now doesn't need media screen to alter it again as it works on all device sizes with its original css.

Related

Centering Fixed Width Page Content

I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.

div content not responsive

I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...

How to center content in a div in responsive skeleton?

There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}

Part of background cut off on mobile

I have a weird background bug on my site, http://www.andytechguy.com/ . You can see that when you go on a mobile browser and search the site, a part of the gradients at the top get chopped off. I have no idea what is going on with that, I didn't add anything to make that happen and it doesn't look good. Please help?
The problem is that #main_part has a fixed width of 1050px. But the rest of the site is assuming the width is about 980px. (980px in my mobile)
Just add a css rule like this:
html {
width: 1050px;
}
And you'll notice that the top bar is not longer chopped off.
However, that annoying horizontal scroll may still be there (but this time without empty space)
Nothing of this is a replacement to actually create a responsive website. That in the end is the real solution. May I suggest that you convert your website to bootstrap?
From what I can tell your h2 text is larger on mobile vs desktop. This probably has to do with font rendering and your reltive size of 1.5em.
Your background gradient is 70px tall. On mobile it is repeating itself since the header's height is greater than 70px.
I would modify your CSS like so:
CSS
#section h2 {
/* remove this */
padding: 20px;
/* add these two */
height: 70px;
line-height: 70px; /* this will vertically align the text */
}
Move your div inside "container" class and create your own custom class like below:
.custom-container{
min-width: 100%;
padding-right: 0;
padding-left: 0;
}
overall, write this
<div class="container custom-container">
<!-- ... -->
</div>

fixing an image so that it does not move depending on the screen resolution?

I have an image of a person fixed in the background of my tumblr layout (my tumblr is tsuzami.tumblr.com), and it appears like so on my screen resolution of 1366 x 768:
http://oi39.tinypic.com/5x0f1g.jpg
but when previewed on screenfly using different screen resolutions, the person is placed in awkward location that obviously look stupid:
http://oi44.tinypic.com/f2yab.jpg
How would I lock this photo in the same place where I intended for it to be no matter the resolution? This is the code I am using for the image:
<div style="position:fixed; top: 0px; left:-140px; z-index:-2;"><img src="http://i43.tinypic.com/j7ca2u.png"></div>
It's hard to avoid that, as the content area is 500px wide, and as the screen gets narrower (even on a desktop) the content will start to cover over the image. I would be more inclined to wrap the whole page in a container div and place the image as a background on that, and then set a min-width on the container. An easier way would be to remove that image div you have currently and just add these styles to the body element:
body {
background: url(http://i43.tinypic.com/j7ca2u.png) no-repeat -250px 0;
min-width: 1200px;
}
However, I'm not too keen about setting a min-width on the body element, so preferably add those styles above to a div that wraps around your whole page.