post short code not look so good

moshekahol · Member · Aug 30, 2016 at 11:30 pm
Copy link

Add topic to favorites
Hi I will be greatful for help here :)
My site is: kahol.co.il
You will see in the lower section of the site posts area,
Now, I dont have a post area in my theme so I used a short code…
But it looks really bad.
Some one have an idea how to make it look neat and clean and also symmetrical?

very appreciated :)
Moshe

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 31, 2016 at 6:12 am
Copy link
Hi Moshe, I’m seeing three posts across the bottom of your site and they seem to look pretty good to me. What is it about them that you do not like?
moshekahol · Member · Aug 31, 2016 at 5:09 pm
Copy link
I used the option of the theme to do 3 rows page.
And out short code for post in each row but it isnt seem centered’ it is a little bit off to the right.
Also can I put the text on the picture like in the blog pages?

https://kahol.co.il/%D7%94%D7%90%D7%9D-%D7%97%D7%99%D7%99%D7%91-%D7%90%D7%95%D7%AA%D7%9A/%D7%9E%D7%90%D7%9E%D7%A8%D7%99%D7%9D-%D7%97%D7%93%D7%A9%D7%99%D7%9D/

and just erase the underline of the link from the text and pictures?

thank you :)
thesacredpath · Member · Aug 31, 2016 at 10:58 pm
Copy link
Moshe, there was some left margin on the images. What I’ve done below is to use a media query to split that between the left and right so that things are centered. I’ve specifically targeted that section only by using the unique post id CSS class in the opening article HTML tag. I’ve limited this to 896px and wider screens. At 895px and narrower, the images go to a single column with the titles to the left of them. Once the images to to a single column, it returns to the original design. Add this at the bottom of your custom CSS.
```
@media screen and (min-width: 896px) {
.post-6 .listing-item a.image {
	margin-right: 0.75em;
	margin-left: 0.75em;
}
}
```
On the titles, I’ve done the same as above and limited the change to screens/windows 896px and wider. Again, add this at the bottom of your custom CSS
```
@media screen and (min-width: 896px) {
.post-6 .listing-item a.title {
    position: relative;
    top: -100px;
    left: -50px;
    color: #fff;
    box-shadow: none;
}
}
```
moshekahol · Member · Sep 2, 2016 at 3:32 pm
Copy link
thank you so much!
there is one more thing I hope you can help me with, there is an underline under the images (like a link underline) that dissappear when I hover on the image – can it be deleted?
thanks again!
thesacredpath · Member · Sep 3, 2016 at 12:10 am
Copy link
Hooray, and we can do the underline also. It is actually a box-shadow element, so add the following to your custom CSS to make it go away.
```
a.image {
    box-shadow: none;
}
```
moshekahol · Member · Sep 6, 2016 at 3:16 pm
Copy link
Thank you very much!
It looks great! there is one thing that I hope can also be done,
I’m trying now to put some overly on the psots photos so the text on them will be easy to read… is it possible?
Thanks!
thesacredpath · Member · Sep 7, 2016 at 8:25 am
Copy link
Hmmm, I’ve tried a number of things, and about the only thing I can come up with is to add a text shadow to the titles. Add the following and see if this would work for you.
```
.listing-item a.title {
    text-shadow: 3px 3px 1px #000;
}
```
moshekahol · Member · Sep 7, 2016 at 6:30 pm
Copy link
It seems to make things not so clear…
here is an example: in the lower part of this site, the post arena you can see what Im trying to create: https://www.tonyrobbins.com/
The overly make the text easier to read. Is it possible to create something simmilar?

“thesacredpath” you helped me alot! I really Appreciate your kindness :)
moshekahol · Member · Sep 7, 2016 at 9:19 pm
Copy link
I checked the theme options and for example in the blog pages it is doing the overly automatic
for example: https://kahol.co.il/%D7%94%D7%90%D7%9D-%D7%97%D7%99%D7%99%D7%91-%D7%90%D7%95%D7%AA%D7%9A/%D7%9E%D7%90%D7%9E%D7%A8%D7%99%D7%9D-%D7%97%D7%93%D7%A9%D7%99%D7%9D/

it makes the picture a litle darker…
I remeber that at first I had overly on my homepage feature picture but with help from wordpress happy engienr :) we managed to delete it as I asked…

The short story is Im trying to make the photos in the homepage post area look like the photos in the blog page – with some overly so it will be easy to read the text on the picture :) thanks for the help!
thesacredpath · Member · Sep 8, 2016 at 8:23 pm
Copy link
You can give this a try, but the issue is, and this is an issue that exists even without this code, is that at between 895px and about 375px, everything falls apart. Add the following, which does what you want it to do, and then save and visit your site. Start narrowing your browser window and you will see what happens. Again, this isn’t caused by this code, and I can’t find anything in your custom CSS that is causing it. I’m still working on a remedy for this, but it is being elusive.
```
.listing-item .image::before {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    content: "";
    display: block;
    height: 87%;
    position: absolute;
    top: 0;
    width: 100%;
}
.listing-item {
    position: relative;
}
.listing-item a {
    margin-left: 0 !important;
}
.listing-item img {
    width: 100% !important;
}
```
moshekahol · Member · Sep 8, 2016 at 9:33 pm
Copy link
First of all, thank you for the effort you put in helping me!
Im really greatful and getting help from wordpress people is really making me feel what wordpress is about! You Rock!

I saw that in mobile it all goes down… the overly is changing and also the posts get in one line… it doesn’t look good.

When I created the posts page I used the “This variation creates a three-column layout” from the theme page here: https://wordpress.com/themes/shoreditch/

maybe this cause the problem?

Also I looked at all the css and there are some codes abot “px width and length” that I configured with help from the wordpress help engineers.

Im really trying to figure it out but with no real success so far. Hope you can find a way to help me

Thank you very much! I am very impressed of your commitment to help and from wordpress as a company!
moshekahol · Member · Sep 8, 2016 at 9:46 pm
Copy link
I see another thing that happens in mobile and smaller screens is that the buttons on the top footer become distorted one on the other….
Is it possible to make it more adjustable for mobile?
The buttons issue and the ovely which go crazy when I make the screen size smaller?
thesacredpath · Member · Sep 9, 2016 at 2:54 am
Copy link
Hi there, for the button issue, add the following to your custom CSS. This takes the buttons to full width on the phones with the two letter text in between them.
```
a.button {
	display: block
}
```
Right now I can’t help but think that some of the other CSS is having an effect on the layout. We’ve done some pretty tricky things with those 6 images and at times that can bring problems with it.

What would you think about editing your images in the three columns and adding a grey overlay to them so they are darker instead of us trying to do it with CSS?

The other thing I think you should try is to copy out all of your CSS, save it into a plain text file and then delete all the CSS and save so that only the original CSS is active. Then visit your site on your computer, a tablet, and on your phone and see what it all looks like.
moshekahol · Member · Sep 10, 2016 at 5:59 pm
Copy link
I tried removing all the css and see what happens…
It seems that the pictures act the same… no space between them – and when I had only the overly it looks messy (the same).

I dont want to add overly to every picture because there are posts pictures which will be changed and updated regulary…

I hope there is an option so theoverly will stick perfectly in every resultion…

thanks for your help and support!
supernovia · Staff · Sep 26, 2016 at 6:24 pm
Copy link
Hey there,

I hope you don’t mind me jumping in to help.

First, do you still need help?

If so, reading this thread, it seems like the original issue was that the columns of images didn’t line up. If I remove all of the extra CSS, they do. They don’t have space between them on narrow screens, but they line up alright.

I’m thinking the main issue is that we’re adding on one change at a time, instead of working with all requirements at once. Over time these changes start to conflict with each other.

So starting with no extra CSS, what are all of the changes you need?
moshekahol · Member · Sep 29, 2016 at 9:03 am
Copy link
Yes thank you, still needing help :)

I managed to fix some things and the only thing last is to make some space between the upper and lower post photos as you can see here: kahol.co.il

thank you very much! :)
supernovia · Staff · Sep 29, 2016 at 3:51 pm
Copy link
I see you’ve got .75em margin-left and margin-right on those; can you try adding the same for margin-bottom?
moshekahol · Member · Sep 29, 2016 at 6:03 pm
Copy link
thank you!
only thing left… :)
here: https://kahol.co.il/%D7%94%D7%90%D7%9D-%D7%97%D7%99%D7%99%D7%91-%D7%90%D7%95%D7%AA%D7%9A/%D7%9E%D7%90%D7%9E%D7%A8%D7%99%D7%9D-%D7%97%D7%93%D7%A9%D7%99%D7%9D/

you can see that the preview picture is croped…
and here:

https://kahol.co.il/2016/09/29/ds/#more-2154

in the end when it put picture for the next article it is croped more… how can I make it full? or better? it looks really awful..
thanks!!!
moshekahol · Member · Sep 29, 2016 at 6:25 pm
Copy link
hooo it seems that the space go out of the window when switching to phone… what can I do to fix it?

No items found.