Kindly assist with some CSS code. I need to have the two content holders ie.Sentrim 680 Hotel and Sentrim Boulevard in http://kaskazibeachhotel.co.ke/live/ frontpage have 0 margins both on the left side and on the right side so that the boxes align well with the website slide which is a 980px width.
I would also need to maintain the space in between the two boxes.
I know this question might be wrongly posted because its a debug but I think this is the only place i can get good help as of now. Please assist.
Thanks guys
Try adding this CSS to your site:
/* Remove padding for these elements */
#midblock, .insidem, .news_item_a, .item, .newsitem_text { padding: 0; }
/* Add space between boxes. Change values as needed */
#midblock .item.column-2 { padding-left: 5px; }
#midblock .item.column-1 { padding-right: 5px; }
In addition, your main image is slightly displaced, adding this should fix it:
.yjsquare.modid94 {
margin: 0;
padding: 0;
}
Related
My site has problems because I want to align 3 posts in a row, and would like to adjust properly to the sidebar on the right. Since I use margin-right: 18px; on each block, it cannot be moved to the right corner, just like it is on the main page: virmodrosti.com
here is the problem:
http://www.virmodrosti.com/?s=minerali
compare with the main page and you'll know what I mean.
I also added the picture wordpress theme
Currently width of each post block is 260px, if I change it to 264 it jumps into the next row, and only 2 posts are displayed in each row instead of three.
On the picture there are three issues to fix them, but I will be glad to know the solution for the main problem.
Kindly let me know, thank you.
You'll need to add css to every 3rd .post element to remove the 18px margin like this:
#content-a .post:nth-of-type(3n) {
margin-right: 0;
}
And to calculate width with this margin missing you can add:
#content-a .post {
width: calc(33.33% - 12px);
/*12px = 18px margin * 2 and divided by the three columns)*/
}
Since your page breaks to two columns it would be worth wrapping both code snippets above in a media query e.g.:
#media only screen and (min-width: 1000px){
#content-a .post {
width: calc(33.33% - 12px);
}
#content-a .post:nth-of-type(3n) {
margin-right: 0;
}
}
I have searched and searched. Fiddled and tweaked. Spent hours trying different suggestions and code ideas...
How can I have the content on my webpage, be centered horizontally with regards to the browsers view port. No matter what I do, I always end up with uneven margins and it is quite noticeable.
The closest so far is:
#MyStyleName
{
margin: 0 auto;
width: 90%;
}
However, because I am using a percentage, no matter what I do with margins/alignment it just defaults to being on the left edge of the page.
extra info:
My issue relates to the top-level, most outer page element. The very first or that holds the content of everything else.
I am not sure what you are asking, but here is a example of af centered <div> with a percentage with.
I also added border-sizing: border-box which enables you to use padding.
#MyStyleName {
margin: 0 auto;
width: 90%;
display:block;
background:red; /* Only for testing */
box-sizing:border-box;
padding: 10px;
}
<div id="MyStyleName">
Hi!
</div>
If your #MyStyleName is a block element, then it should work. If not, then it's not gonna work. In such case you can add display:block; to the selector style.
I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.
Let me know if you need any of the HTML. Below is the CSS I've used:
.branding-data {
width: 960px;
background: #333;
height: 50px;
}
.logo-img.center {
display: block;
width: 200px;
margin: 0 auto;
background: #ccc;
}
For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:
If you don't already have Delta installed (recommended whenever using Omega), do it.
Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).
Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".
Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.
Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).
In "global.css," select the branding region, and center the text (code is as follows):
.region-branding {
text-align: center;
}
Then, insure that no float is applied to the logo image, and that it has margin: 0 auto
.logo-img {
float: none;
margin: 0 auto;
}
If it doesn't work the first time, remember to always clear your caches before freaking out.
Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.
Hopefully this helps someone.
I'm designing a website, I'm trying to get a simple coloured div across the top of the browser, I've tried simply using:
div{
width:100%;
}
but noticed there's white space on either side and on top of the screen.
I'm looking for something similar to the blue header on Facebook that fills the entire screen.
Any suggestions how to accomplish this?
There is always some margin and padding in all browsers for the body. So, try doing the following and recheck the results:-
*{margin: 0; padding: 0;}
The above code will remove all the extra margins and paddings from all the tags!
You should use normalize.css for a kick-start designing of your applications though.
did the body have margin?
Try adding:
body {
margin: 0;
padding: 0;
}
or use a reset for styles like: http://necolas.github.io/normalize.css/
It's because of default styles of your browser, use this to reset it:
* {
margin: 0;
padding: 0;
}
Demo
Besides that, I'd suggest you take a look at css reset which give you a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
When attempting to print the following web page in IE7 (or IE8 compatibility mode), some content (the bottom two questions) is truncated. You can view the issue in Print Preview.
http://www.testdesigner.com/tests/print.jsp?testId=4097
Removing the float in the following css block found in printTestTwoColumns.css will fix the issue, but also remove the double column formatting.
.question {
float: left;
width: 44%;
padding: 0;
margin-right: 0;
}
It's important to note that the HTML in the URL above is dynamically generated and the problem exists with all types of content, including pure text (no images). The content always overflows off the page.
Short of changing the markup to a table based layout, does anyone have a possible solution?
Try adding a print stylesheet that uses a much simpler layout designed for narrow printing on paper. You probably won't need any floats at all.
with FLOAT IE tends to add a addition 10PX padding even though you are stating padding:0.
Try adding display:inline ie
.question { float: left; width: 44%; padding: 0; margin-right: 0; display:inline }
Hope this helps.