I've been trying to increase the width of the post container in my theme.
The thing is that, I can't seem to get it working. I've tried editing my style.css, but it just doesn't work.
I have added a RIGHT sidebar via "STYLE" plugin.Everything seems fine. I have tried increasing the content widht.. didn't work.
I've got a child theme, so, it's all good.
Here are the screen shots to my page :-
Finally.. I got it to work..
.content-sidebar,.primary-sidebar {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
}
Had to adjust the paddings on the right sidebar... edited the style.css file...
Related
can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.
I am trying to create a mobile page that resizes for different devices.
So far so good but I cannot figure out why extra space is being added to the right of the page. I even tried hiding overflow and other hacks.
The issue appears when looking at the page on a mobile device.
Any help?
Here's the page:
http://pages.purolator.com/mobile
Also, there is padding being added as the tab section expands. Can't figure that out either.
Thanks!
Remove the padding from .pageHeader and it fixed it.
Try this:
padding-top: 15px;
padding-bottom: 15px;
Edit:
This will mess with the padding for your logo. So you will want to add this to your css:
.pageHeader img {
padding-left: 15px;
}
When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css
A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p
I am building this mobile website.
If you check it on your mobile browser it should fit in such that there is no horizontal scrolling. (Content should only be vertically stacked).
Can someone help me in fixing the CSS of the page. Just let me know what the correct CSS should be so as to auto adjust for different mobile phones.
CSS of this page can be found here. Basically, two main components I guess. (body and content).
Also, I used this mobile website as a sample. Please refer to its inline CSS by viewing the source of that page.
Thanks
Okay, so it seems that your #content div is actually pushing the boundaries of the screen even on my large firefox browser. In your CSS you have it declared like so:
#content{
width:100%;
margin: 0;
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
I have confirmed by editing the CSS locally, that your padding is actually pushing the boundaries of the 100% width div, but the good news is that since it's a block level element it already fills all of the room available to it. Try get rid of the "width:100%;" and see if that works for you. It will still display exactly the same, but without those scroll bars.
So something like this:
#content{
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}