Part of background cut off on mobile - html

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>

Related

Layouts changing drastically in mobile view

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.

HTML/CSS: How to make a <div> containing an <img> tag inside a <section> responsive?

I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.

Re size of header on change of window size

Below is my code which is working fine when the window is in full size. But on window re size, the logo and the header does not appear properly.Here is my code
Do I need to change the CSS or can the same using bootstrap. I tried changing the values given in pixel to percentag. Still it didn't work.
<div class='header'>
<img style='position:absolute;margin: 12px 10px;' src='https://business.microsoft.com/-/media/mssc/footericons/xbox.ashx?h=52&la=en&w=52&hash=94B5BB82970A4CF66DBE9F0D78B7E10EBD2D9A5B'/>
<h1 class="heading">My page</h1>
</div>
You can use below responsive css so that it will allow you to resize your window till width 992px. for this use below code to make it responsive
/* responsive css start */
#media (min-width:992px){
.heading{ text-align: center;}
.navContent{text-align: left;float: left; padding-left:0px; padding-right: 15px; position: relative;}
/* responsive css end */
I am attaching screenshot for your reference in which you can see it will does not overlap your header content. But its max width limit is restricted to 992px. you can change it as per your requirement.
It's recommended to place all your CSS code in a separate file.
It's possible to put the image inside the H1 tag, it can be OK with a logo. you would start with this:
.heading {
display: inline;
}
But, If you just want to make the content structured and make it stay together... add a minimum width, like this:
.navContent{
min-width: 400px;
}

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js