While using media queries for screen resolutions of tablet and mobile phones, the "sideNav" which contains all the links and the social media buttons on the right hand side does remain floated but the "maincontent" section containing all the content goes down and does not stay up floating the "sideNav". I am not able to understand why? The "sideNav" normally floats on the right of the "maincontent" but it does not on resizing.
The code for a small size desktop monitor :
#media (max-width:1100px) and (min-width:767px){
body{
width:90%;
margin:auto;
}
#body, #wrap{
width:100%;
margin:auto;
}
#maincontent{
font-size:100%;
width:auto;
margin:auto;
border:1px solid black;
}
#header{
font-size:100%;
display:inline-block;
}
#google_translate_element{
display:inline-block;
}
#search{
}
#breadCrumb{
height:1em;
padding-top:1%;
font-size:95%;
}
#navbox{
height:2em;
margin-bottom:1%;
margin-top:2%;
width:100%;
}
#navbox li{
margin:none;
font-size:95%;
}
#sideNav{
width:30%;
padding:0;
border:1px solid black;
}
}
The page with the problem : http://analyzedstock.com/testing/basics-of-stock-market.html
CSS : http://analyzedstock.com/testing/main.css
Please resize the browser
The problem caused by rule: #header { width: 100%; }
Please try to remove or adjust it to make site work properly in smaller screens.
Related
This is my css code:
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
JSfiddle:
http://jsfiddle.net/yb2sLhox/
I need page like same margin such as header, content and footer. left and right side margin should be same space.. like this http://postimg.org/image/ojhkt7bg3/a099ed23/
When resizing the window is working correctly. I think in content part need to change it.
Can anybody help me?
You can try adding padding to your section
section{
padding: 0px 30px;
}
OR
Try adding some width to your section like this
section{
width:90%;
margin:auto;
}
DEMO
I have a fixed width layout I am trying to make responsive, I have looked at the code and #wrapper div isn't adjusting to full width when I use the different views in Dreamweaver.
The footer I get a scroll bar and the footer, slider, top-bg are all not going full width. But the content area does?
I changed the wrapper to 100% thinking that this would adjust everything within the page to move full screen but that hasn't worked?
CSS:
/* Containers */
#wrapper {
width:100%;
}
#top {
width:900px;
margin:0 auto;
}
#top-bg {
background-color:#03274B;
width:100%;
overflow:auto;
}
#topnav {
width:900px;
margin:0 auto;
}
#topnav-bg {
clear:both;
background-color:#072C53;
width:100%;
padding:15px 0;
border-top:2px #2B4D71 solid;
border-bottom:2px #2B4D71 solid;
}
#banner-bg {
width:100%;
background-image:url(../images/bg/blue-bg.fw.png);
background-repeat:repeat;
}
#banner {
padding:0px 0;
width:900px;
margin:0 auto;
}
#subbanner {
width:900px;
margin:0 auto;
padding:30px 20px;
}
#subbanner-bg {
width:100%;
}
#subbanner h1 {
font-size:48px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px #000 solid;
}
#content-wrap {
width:900px;
margin:0 auto;
}
#leftside {
width:425px;
margin-right:50px;
float:left;
}
#leftside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#rightside {
width:425px;
float:right;
}
#rightside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#content {
}
#content-bg {
}
#content-wrap {
}
#footer {
width:100%;
margin:0 auto;
padding:20px 0;
}
#footer-bg {
clear:both;
background-color:#03274B;
width:100%;
}
#footer p {
}
Without posting your HTML markup we have to make some assumptions. I also suggest you do not use the design views in Adobe Dreamweaver as they bear very little relation to how a browser will render your page, I suggest you press F12 (Windows) or option + F12 (Macintosh) to view your page in your preferred browser.
The CSS you posted appears a little broken, I am assuming that in areas such as top {...} you actually have #top {...} as top is a non-standard element.
That being said you still have areas in your CSS such as:
#top {
width:900px;
margin:0 auto;
}
The element with id="top" will only ever be 900px wide despite the size of it's parent element (possibly id="wrapper").
Let's assume you have markup similar to the following:
<div id="wrapper">
<div id="top">
<div id="top-bg">
</div>
</div>
</div>
Despite the fact that #top-bg has width: 100% it will only ever be 900px wide as it is a child of #top and width percentages are relative to the parent container's width.
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I've got basic web design skills atm, I'm working on my portfolio and need help with the landing page please.
I want the heading and sub heading on my page to resize when the browser resizes, but it's not working.
The body font is 12px but I only want the font to resize in the div tags not the body text.
I have 2 div tags with ID tags for the CSS like so.
<div id="heading">
this is my heading text
</div>
<div id="subheading">
this is my subheading text
</div>
This is the css.
#heading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 1%;
font-size: 55px;
color: #FFF;
position: relative;
}
#subheading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
font-size: 36px;
position: relative;
}
I want both headings to reduce in size by about 20/30% when the window/browser is resized
but when I change the values for the tablet css, different to these values in the desktop view
everything changes straight away. I want the text to stay the same in desktop view and only change size in tablet view. Hope this makes sense.
Appreciate a reply.
Use Media Queries
For Instance,
#media only screen and (min-width: 1920px) {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
#media only screen and (min-width: 1024px) /* for ipad */ {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
}
PS: The pixel values are used as an approximation for illustrative purposes. You can replace them with your desired values.
See a working example of a media query here:
http://jsfiddle.net/fSYSJ/
body { background:silver; }
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
}
#media screen and (max-width: 768px)
{
#heading { color:red; }
#subheading { color:red; }
}
#media screen and (max-width: 420px)
{
#heading { color:blue; }
#subheading { color:blue; }
}
Notice I'm currently just changing the color of the headings, just adjust it to change the size instead and also adjust the break points in pixels to your liking.
Don't set the width to 100% ever ! Even better - remove the width and it will work ;d
#heading {
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
becouse the div is a BLOCK element, it will take all the space in X axis, so you dont have to set the width property. By default its 100% ;)
In the videos playlist at the bottom, video description (background black) needs to go 20 pixels down. You will understand it better if you view the website with Firefox.
[links not working anymore]
#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
None of the suggestion above worked. I solved it with margin-left:-20px. Hate internet explorer!
IE6/7 has issues with mixing floats and absolute positioning. Try removing the position:absolute from #content #videos .playlist .entries .description p
Your link is broken, the correct url should be http://pangeaadvisors.org/SS.jpg
In Firefox 3.5 I see it exactly the
same as your screenshot of IE (20
pixels raised).
In IE6 I see it aligned to the base
but with 20px on the left
and IE7 the same as IE6 but with some glitch
in the scrolling.
In firefox the first 2 items are miss-placed, but the 3rd item in the playlist is displayed correctly. The factor effects this is the length of the title. Longer title display fine, shorter with the 20px gap, the line-height pushes the time-stamp down.
If you add another div inside the "video" wrapping around the title and define a height and width on this with overflow:hidden, it should standardize and stop the issue of some blocks being different heights to others.
With this done you can then use a couple of CSS hacks to write rules for any misbehaving browsers by using
position:relative;
top:XXpx
A little down-and-dirty but should work just fine. Can't be more specific since I can't actually re-create your problem in my browsers.