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;
}
}
Related
So I have two tabs, I used mui tabs for that. For the first tab I display the ingredients, in the second tab I add new ingredients with different forms. I have different fields for each form so whenever I click on one form to open ( I use a mui split button to select and open different forms) , forms open with its width ( sometimes it jumps to center with smaller width, sometimes covers the whole tab). It looks bad. I want to make it a fixed size like 500px then everything looks good. But then for mobile usage or in different small-size components (I want to reuse the who tabs component), 500px doesn't look okay. I need to scroll to see whole form. I tried 100% or fit-content didn't work. My CSS looks like this now.
#formContainer {
width: 500px;
height:480px;
margin-top: 20px;
}
#media only screen and (max-width: 800px) {
#formContainer {
max-width:fit-content;
height:fit-content;
}
}
I am not good at CSS so maybe I am missing something basic? I try to look for it but I don't even know how to search about my problem. What would you suggest? Thanks
It's a little difficult to know exactly what you are going for. What I did on one of my angular projects is using a fixed position with a percent value
#formContainer {
position: fixed;
width: 500px;
height:480px;
margin-top: 20px;
}
you also may want to change it to be a class and not an ID since it will be re-used in more than just a single element.
Secondly, you can keep your current values, but also use max
#formContainer {
width: 500px;
max-width: 50%;
height: 480px;
min-height: 50%;
margin-top: 20px;
}
For some reason min-height seems to do the same as max-width.
I'm not a CSS expert so hopefully you can get a more precise answer on the hows and whys. I am simply a fellow sojourner suffering in the world of CSS.
I'm running Salient 9 theme on wordpress and I'm trying to have a full width 2 column portfolio with no luck.
I managed to have a 2 column portfolio using this custom CSS
.portfolio-items .col.span_3 {
width: 47.6% !important;
margin: 0px;
padding: 0px;
}
but that does not work in full width.
There also seems to be some conflict with my row settings.
If I set the row to "full width content" it is displayed in a very weird fashion, with a narrower background and images spanning out of it.
To display it correctly I have to set the row to "full width background", but I guess that's what is preventing me to have the 2 column portfolio spanning from side do side.
At the moment I've set the page up so that it's totally clear what I mean if you visit it. http://trunkstudio.it/work/
I'm also attaching a screenshot of the page when I try to set the row to full screen content.
The layout for those items looks like it's using JS to set the width/position of the images, possible masonry/isotope.
You'd need to override the inline styles, like: (and I shudder to use important)
.col.span_3.element.one-fourths {
width: 47.6% !important;
position: relative !important;
top: auto !important;
left: auto !important;
}
I managed to fix it a bit differently with
.portfolio-items .col.span_4 {
width: 49.6% !important;
margin: 0px !important;
padding: 0px;
}
I'm so confused, take this example
I had a page on WordPress that I wanted to turn to kinda landing page.
I hid the
Nav Bar and the header
I used this code
.page-id-58 .image-bg-header,
.page-id-58 .hero-container {
display: none;
}
It worked perfectly
I also selected full width while editing that page on the editor
I had to use the same color to make that page look like a landing page, so I used that code
.page-id-58 #content article {
background-color: #000000 }
.page-id-58 #content {
background-color: #000000 }
Here's the issue...
It is NOT full width, not as I wanted to be, there's still a lot of space in the left and the right side
As you can see here https://i.stack.imgur.com/07AEt.png
What am I missing, please?
Website preview
Your theme is using Bootstrap 3 and so the maximum width is 1170. If you want to change this to 100%, add this to your theme's 'style.css'.
#media (min-width: 1200px) {
.container { width: 100% !important; }
}
Also your image dimension is low - try adding big image and check.
Check the screenshot below for the image dimension change.
If you want to set full width of your image then you should be use this css
Hope this help
Let me know further clarification
.page-id-58 img.alignnone.wp-image-65 {
width: 100%;
height: 100%;
}
I have devolopped a responsive website with Twitter Bootstrap 3. However i have noticed that there is a scroll bar at the bottom of my screen due to a right space on the page. Even though i used
body {
margin:0px;
margin-top:0px;
padding:0; margin:0;
margin-right: 0;
}
I still have a right space and a scroll bar under my page as shown in the picture below
Please How to remove the right space from a bootstrap built website ?
i looked in to it what i think is, its the navigation bar which is causing it.
try reducing the px for nav bar. look at the picture , reduce the px from 1903 to 1980 may be !! let me know what happens
First of all, elements with classes articles_text2 and articles_text4 aren't placed properly, they create some extra space on the right. For example, you can set them left: 50%;. However, I'd suggest that you re-define positions for all articles_text elements because values like 57% and other look like some magic numbers taken from nowhere.
Secondly, you should remove padding: 0; from #full-width because it breaks Bootstrap Grid System. What I can suggest in order to remove left and right padding is to do the following trick:
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
It should help.
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;
}