Re size of header on change of window size - html

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;
}

Related

Different layouts for different screen's width

I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)

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>

How do I get the content (mostly images) to scale or resize with the window size on tumblr?

My blog/website is iamdonle.com
An example of what I want is 13thwitness.com
The images on mine doesn't scale and a scroll bar will appear. On his website the images get smaller with the window. I'm sure it's simple but I'm a noob. Please help!
You images are scaling down, but your logo is not!
Try:
.logo {
max-width: 100%;
}
First, you'll need to make sure your container is able to scale. Right now it has a set width of 1150px, this needs to be either a max-width or percentage based.
First, remove the width declared on #container and add this CSS:
#container {
max-width: 1150px;
padding: 5px 30px 0;
}
Then you'll need to remove the width declared for your header. You can do this by either removing the line completely (line 82 of your CSS file) or by overriding it in your 'Custom CSS' field box in the Customization screen by doing:
#header {
width: 100%;
}
Then, as others have mentioned, you'll need to add a max-width to your logo as well.
#header img {
max-width: 100%;
}
Note: when I viewed the blog you were using the "Quite Big" theme, the code above only applies to that theme.

DIV height wont scale the way I want

http://telschowdesign.com/_JCM/ - Mock up
http://telschowdesign.com/_JCM/index2.html - The fail
Pretty much I have these two side panels that I want to scale in height as shown in the mockup. For what ever reason I can't get them to do that using my current CSS. I've tried using height=100% but that isn't working. I do not want to use a static measurements such as 700px etc etc
I know this can be done using tables instead but I want to be able to use the same content for a mobile version for the CSS.
height:100% doesn't mean what you think it does. It means the element you set this style to, it will take up 100% of the height of its containing element, not 100% of its children's height.
What you want to achieve is a very typical 3 column layout. Here is a link to an example of how to do it:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
The height of a div is the height of the content.
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps..
Replace the css of the #container id :
width: 1000px;
margin: 0 auto;
Then your content will be centered ;), if you need it, you can also use a CSS framework like 960grid.css, you will be desktop screen + mobile + iPad compatible and more productive and adaptive ;)
Then, you've a js error on node :
<body onload="javascript:panels()">
panels() function does not exists... ;)
You can use Divs and % on your site master and the following css
navigationbar
{ float: right; height:40px; }
maincontent
{ float: left; width: 60%; }
and your HTML will look like this...
div id="navigationbar"
div id="maincontent"
and these can be inside one big Div. Hope it helps