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;
}
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;
}
}
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
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.
Simply put I have this page:
http://www.constantinos.org/portraits/
Each set of thumbnails is a NextGen Gallery and I want to make the galleries break lines if needed so they are not forced to appear as blocks in one line and the galleries will be next to each other instead of one per line.
An image is worth a thousand words so I photoshopped an example of I'd like to do:
http://constantinos.org/example/Screenshot%20from%202013-06-29%2018:01:23.png
this is my CSS for those sets of thumbnails:
#ngg-gallerySingleGallery {
float:left;
display: inline !important;
clear: none;
width: auto;
}
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 0;
display: block;
margin: 4px 0px 4px 5px;
padding: 4px;
position: relative;
}
Pfff. is doing my headings.. Anyone has any suggestions?
Ok. so the problem is that you have your images grouped by threes in ngg-galleryoverview divs. So, even though they are floated, (both the images and the ngg-galleryoverview divs), your images will always be grouped in threes (You may need to review the box model a bit).
I don't know about how the galleries function—and this may be required markup for them to work properly—but that's why your images aren't flowing the way you want.
In fact, if you make your browser window really wide, you can see that the next three images will jump up to the first line.
So, I guess your best bet would be to place all the images into one gallery, rather than several smaller ones.
I have a website in which I want to change the space between some elements. I don't know much about CSS. I am a newbie to it. You can see the website here.This is now on a temporary domain name : timepasssite.hostoi.com.
I want to reduce the space between logo and main menu1...Home..Add a Listing..I have to move it up by a small distance.
I also want to move the search box up in the line of the Main Menu1.
I want to move up the Featured Listing up near the earth's photo 4 px distance should be enough. Listing Categories move Up close to Featured Listings 2 px distance..
Can anybody guide me how to do this ?
Here are the Common.css and Style.css files..
Download Common.css Style.css
Image :
I can't paste the files here...I don't know how to...Please download the files for me and provide me the solution!
Generally speaking, you have to use margin, padding or in case of absolute positionning, left, top etc...
In order to reduce the space between your logo and your main menu, you have to reduce (or delete) the padding-bottom in div#logo css property, located on common.css, as this :
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
For your search bar, the css is contained inside the parent div, inline style. You'll have to override the top property in your css file, and giving it -50 as a value for instance.
Now you have the general idea, I think you can manage your other issues.
I strongly suggest you to use Firebug (extension for Firefox / Chrome) though.
Feel free to ask for precisions.
I seen your css. In that padding: 7px 10px 10px; making space between menu and logo, and also you were mention height also.
reduce the padding and also margin-top property.
better post your codes
make this change in common.css to remove bottom spacing of the logo -
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
2, 3
I think
You can use margin-top or bottom property
or padding
In common.css, find this:
div#logo
{
/*width: 185px;
height: 75px;
float: left;*/
text-align: center;
padding:15px 0px;
}
When two values are supplied for the padding attribute, they specify the top/bottom and left/right values. Therefore at the moment there is 15px of padding being applied to both the top and bottom of the logo. (See http://www.w3schools.com/cssref/pr_padding.asp.)
Change the padding:15px 0px; line to padding: 15px 0px 0px 0px; - this will set all padding to 0 apart from the top, which stays at 15px.
You should be able to find a similar solution for your other queries: look for the container id in the HTML, then find the CSS for the id. For example, if the Featured Listing is in <div id="featured">, look in the CSS for div#featured, and edit the padding property there.