I don't know anything about HTML codes and I'm using the 'Galauness Blogger Theme' I found on the internet. I changed some things that weren't too hard and the only thing I currently don't like about my blog is the fact that it seems like the wrong title belongs to the wrong blogpost.
If you visit my website it looks like the second row of text belongs to the first row of images but that isn't the case.
Would anyone mind helping me with a) decreasing the space between the text and the image or b) increasing the first row of images and the second row of text?
My website is www.lemontierres.com
Thank you in advance
Decreasing the space between headline and image is possible, but can get complicated. The reason is each headline in your CSS has a height set to 40px and a padding of 10px. You'll find this in the css for the selector .post h3. If the height:40px; would be removed, it looks better as currently all your headlines only have one line, but in case of a single headline with 2 lines the three entries in each row wouldn't be aligned anymore - the fixed height takes care about keeping everything aligned.
To have more space between the entries, you can add padding for a wrapper element - e.g. every entry is wrapped in a div with the classes post and hentry, so adding
.post.hentry {
padding-bottom: 30px;
}
will add more space between each row.
I've noticed that adding padding to the outermost wrapper - the div with the class date-outer - leads to weird results, but adding it to .post.hentry seems to work.
Related
How can i inline images? i am using bootstrap row, and per image have a class of "col-md-3".
the problem is, as you can see, the 5th image goes to the right, it should be on the left, underneath the IMPOSSIBRU image.
Thank you!
I think this happens because your images have different heights. If you are able to restrict height to a certain 'px' then this might help to resolve the problem.
When using cols to group a bunch of things, it's always good to try and keep layouts + sizes the same to prevent this kind of thing happening.
I have trouble finding what's causing the last td element in my table to be vertically offset in Outlook '07, '10, '13 and '16.
The last row will always be offset. I tried looking at line heights, heights, widths, line breaks, but to no avail.
Does anyone know why this is happening?
Ok, found the issue was an empty I used for adding spacing (some clients don't support margins). I used an empty table to for spacing instead (nasty, I know).
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.
I am working on multiple emails for a client who is using Outlook 2010 version 14 for a PC in their office. No matter how the email is created the right side of the table is blown way out.
For example:
Email #1:
Email #2:
This is the code: view-source:http://fortworth.dmplocal.com/main/index.php?action=viewsenthtml&id=95&ids=e9499cb22fd2fbaee560c877a2716fa0aab6880d
I have done a lot of searching to try and figure out what I could do to fix this, below are some things:
Took all CSS inline
Made sure all cell padding, cell spacing, and borders were set to zero
Specified width for tables
Specified height and width for images
Made sure images were the height and width that is specified in the code
Made images jpg's versus png's
Removed all unnecessary white space
My table is not more than 23.7 inches in height
I have read a lot of forums and found that a lot of people have problems with Outlook as well, but I have not found one that has the big space to the right of the table thus pushing it out that mine has.
Any help would be greatly appreciated!
For HTML tables, specify the width and height using HTML attributes rather than CSS styles. Modern versions of Outlook ignore width and height styles.
As #MarcB mentioned, Outlook 2007/2010/2013 uses the rendering engine of Word to render emails. Previous versions of Outlook used the rendering engine of IE. This shift caused significant changes to the landscape of HTML emails.
Below is a partial list of features not supported by Outlook 2007 and up:
CSS styles
float
position
display
width
height
padding (doesn't work on div and p tags)
background-image (only works on the body tag)
list-style-image
HTML attributes
alt (img)
background (table, th, td)
colspan, rowspan (th, td) (there's conflicting info on this, but it does appear to be supported, as long as a value of 0 is not used; however, it's often recommended to nest tables instead of using colspan and rowspan)
Miscellaneous
Animated GIFs
HTML forms
Try placing /> to close the image tag. This alone worked for me. This is a problem wholly invented by MS. As if it wasn't bad enough before.
#MattCoughlin's answer is right insofar as Outlook code. However, I would also add that Outlook is really specific about column and row counts.
Therefore, check that the number of columns add up. Use empty cells and colspans where necessary.
I just did some edits to your code and put up a fiddle for you to test.
http://jsfiddle.net/YWnzc/135/
But I could't check what I have done in my outlook 2010, but I think there are a lot of limitations in outlook 2010
http://fixoutlook.org/
Let me know how it goes.
further I also see that you have tables nested in your code. I dont hink this is necessary. seeing your mailer design this should be a pretty similar and the pronlem you are reporting should not be there, if it was properly coded.
As for me outlook ignored width of div, so if you code it like:
<div style="width:500px">
<table width="100%">
...
</table>
</div>
the width of table would be expanded to 100%, so try nesting all of fixed width elements inside tables and set fixed with to these parent tables (note that table also needs style), like:
<table width="500px" style="width:500px">
<div style="width:500px">
...
</div>
</table>
this will give you the width needed