Link/Mobile Issues

  • Resolved ejlarson

    (@ejlarson)


    4 years, 9 months ago

    So I love this plugin- I just have a couple issues I can’t seem to solve.

    1. I want the title and read more to be links only. I also want them to appear the same color that they are, just with the title as a link (it’s currently just colored text).

    2. The thumbnail image is slightly too small for my liking, but I couldn’t figure out how to make it bigger without being too big. Medium/medium-large and everything else except “post-thumbnail” are too large and look bulky on my screen.

    3. Related to #2 above, the image being so small makes the first few words of the excerpt wrap around the side of the image on mobile, instead of all the text displaying below.

    Here is what my code currently looks like:

    [latest-selected-content limit=”1″ display=”title,date,content-small” titletag=”h4″ chrlimit=”300″ url=”yes” linktext=”Read More” image=”post-thumbnail” elements=”13″ status=”publish” orderby=”dateD” show_extra=”date_diff”]

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hello,

    To make the links appear only on the title and the read more text, you can use the elements="26" attribute. The styles of the tiles are influenced by the theme style, so the image size and the text wrap can be adjusted to match the styles you have on that page. Do you have a test page I could check?

    Regards,
    Iulia

    Thread Starter ejlarson

    (@ejlarson)

    Thank you for the quick reply. It is currently displayed on my homepage empathyencompassed.com. I set the imgage size as “medium” which fixed the mobile issue, but it seems so large on desktop.

    I’m just not too savvy when it comes to coding/css.

    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Please try to add this piece of styles and let me know if this looks better.

    
.latest-post-selection article {
	padding: 20px;
}
.latest-post-selection article img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin: 0 20px 0 0;
	max-width: 300px;
}

@media all and (max-width: 600px) {
	.latest-post-selection article {
		padding: 20px;
	}
	.latest-post-selection article img {
		clear: both;
		float: none;
		margin: 0;
		margin-bottom: 20px;
		max-width: 100%;
	}
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Link/Mobile Issues’ is closed to new replies.