Argent Theme – Appearance of ‘older projects link’ different to demo

Hi, the Argent demo site has the Jetpack Infinite Scroll feature active, which then has the differently styled button. Go to Jetpack > Settings and scroll down to Theme enhancements and select Load more posts in page with a button.

Argent will pull images with alignments of center or none to the left by 60px, it is part of the theme’s design. You can override that with the following custom CSS, which you can put in at Customize > Additional CSS.

@media screen and (min-width: 768px) {
	img.size-big, .wp-caption.caption-big {
		margin-left: 0;
	}
}

Hi,

Thank you. The center alignment of images is sorted now!

However, with ref to my first query, I can’t seem to find the theme enhancements option anywhere. The Jetpack version is 4.3.2

When I go to Jetpack > Settings, there are the following tabs:
General
Engagement
Security
Appearance
Writing

I checked under all of them and can’t find Theme enhancements or Load more posts in page with a button anywhere?

Could you guide me slightly more on this please?

Sorry, Settings is a tab at the top of the Jetpack page, to the right. It’s then in the Writing section once you get to the Settings tab.

okay under writing I can see the following options:

WP.me Shortlinks
Shortcode Embeds
VideoPress
Contact Form
Spelling and Grammar
Markdown
Post by Email
Beautiful Math
Custom Content Types

Where do I go from here?

Ah, sorry, I should have looked earlier. The latest version of Jetpack is 5.6. You should really upgrade to the latest version, and then you will find things where I mentioned.

Ah, Did it! Thank you! This is working perfectly.

Just having trouble getting my head over:
1. Finding the CSS divs for the icon so I can change the colours and make it look exactly like what is shown on the demo

2. It still seems to be cutting off two images – in the demo only 9 images are shown before it says ‘older projects’ where as on my website it’s showing 10, I’d ideally like it to show either 9 or 12 before showing ‘older projects’ icon, as it’s looking slightly odd right now.

Any idea how I can resolve this?

Okay I managed to find the css (#infinite-handle span) for point number 1 although struggling slightly with centering the text vertically.

Number 2 still struggling with.

We can bump the text up to centered with the following.

#infinite-handle span button, #infinite-handle span button:focus, #infinite-handle span button:hover {
	position: relative !important;
	top: -8px !important;
}

Worked perfectly, thank you!

If you have any idea how to solve the other point, pls let me know, it’s the only thing left:

It still seems to be cutting off two images – in the demo only 9 images are shown before it says ‘older projects’ where as on my website it’s showing 10, I’d ideally like it to show either 9 or 12 before showing ‘older projects’ icon, as it’s looking slightly odd right now.

Really, appreciate it ??

You can set the number of posts to show on Portfolio pages by going to Settings > Writing in your dashboard, scroll to the bottom and set the number as you wish.

Thanks, for some reason it didn’t change when I made changes under the writing section but did when I did it under the reading section.

Thanks for all your help!

Awesome, and you are welcome!

Sorry to disturb you again,

I have embedded the Mailchimp ‘slim’ form in the footer of my website and am trying to customise it slightly.

Whenever I try to change the width etc of the input form fields the effect is on the whole container. The width of the whole container stretches so that it overflows on to the right hand side past the actual footer and this is more noticeable as the screen size gets smaller.

I want to achieve:
a. making the email address input field slightly bigger in width
b. moving the email address input field down so that it is inline with the search bar on the left of the footer
c. centering the ‘subscribe’ button (in relation to the field)

This is the coding of the embedded form:
<!– Begin MailChimp Signup Form –>

<style type=”text/css”>
#mc_embed_signup{background:#222; clear:left; font:14px Helvetica,Arial,sans-serif; }<br />
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br />
</style>
<div id=”mc_embed_signup”><form id=”mc-embedded-subscribe-form” class=”validate” action=”https://priyanka-jain.us17.list-manage.com/subscribe/post?u=98e17fe386f22af596125f0ae&id=46103f1e12&#8243; method=”post” name=”mc-embedded-subscribe-form” novalidate=”” target=”_blank”>
<div id=”mc_embed_signup_scroll”>

<input id=”mce-EMAIL” class=”email” name=”EMAIL” required=”” type=”email” value=”” placeholder=”email address” />
<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;” aria-hidden=”true”><input tabindex=”-1″ name=”b_98e17fe386f22af596125f0ae_46103f1e12″ type=”text” value=”” /></div>
<div class=”clear”><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Subscribe” /></div>
</div>
</form></div>
<!–End mc_embed_signup–>

This is a link to the CSS selectors in relation to the embedded form –
https://kb.mailchimp.com/lists/signup-forms/css-hooks-for-customizing-forms

This is the customization I have done so far:

/*move subscribe button up closer to the email input field*/
#mc_embed_signup, input.button {
position: relative;
bottom: 40px;
}

/*trying to increase width of the email input field but not entirely working as it’s increasing whole container width*/
#mc_embed_signup, div.mc-field-group input {
width: 500px;
}

Since you have to put the #mc_embed_signup selector with any other selectors to ensure that the style applies it has an effect on everything.

Any idea how I can achieve the above without having the footer overflow to the right?

Hi, you can increase the width of the mailchimp email field with the following CSS, but right now the right end of that field is in alignment with the right edge of the post featured image above it. With the following, it looks a bit odd given that the left end of the search field on the left is in alignment with the left edge of the featured image above it.

#mc_embed_signup input.email {
	max-width: 100% !important;
	width: 80% !important;
}

What I would suggest instead of what you have done now would be the following.

#mc_embed_signup input.email {
		width: 90% !important;
	}
@media screen and (min-width: 1080px) {
  .footer-widget-area .widget-wrapper {
	 max-width: 1260px;
	 width: 100% !important;
  }
}
@media screen and (max-width: 767px) {
	#mc_embed_signup input.email {
		width: 100% !important;
	}
	#mc_embed_signup form {
		padding-left: 0 !important;
	}
}

Note: You see a lot of !important in the above. That is because I was entering the CSS with my web inspector into the original theme CSS file. I would try it all without the !important and see what happens.

Hmm, so I tried without !important and it basically just changed it back to the original but worked when I did it with the !important.

However it moves the left and right section of the footer in central alignment with the whole page rather than the columns of the posts featured above them. Is there any way to do this?

Also is there any way to move the ‘submit’ button under the email input field so that is centrally aligned under the email input field rather than left aligned?

I have also noticed that on a safari browser the ‘search’ field looks quite different.