Clickable elements too close together

Support
#1

Pretty sure this is the menu at the base of my site which does looking very tight on a mobile device, any help appreciated dorsetphotoevent.co.uk on resolving Google saying “Clickable elements too close together”

#2

Hi @dpe,

Thank you for writing in, the Mobile-Friendly test errors do not necessarily mean the issue is coming from the theme. Google does not give details about what’s causing the errors.

First, please clear all your caching features (plugin, server-side, CDN, WP-Rocket, and browser’s cache) then do the test again.

If you think it’s the links on the footer, please add this to Theme Options > CSS

@media (max-width: 767px) {
	.x-colophon.bottom .x-nav li {
	    display: block;
	    line-height: 2;
	}
}

This will make those links stack to each other instead of inline (on mobile only).

Please do mind the custom CSS given serve only as a guide and we won’t be able to provide support for enhancing it, you can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial.

Also, read Rad’s reply here which can be a possibility on your case as well.

Cheers!

#3

Many thanks, now I need to space the social media icons if possible

#4

Hello There,

Please follow above CSS tutorial on how to get elements selector. The following are another guide:

See this: https://screencast-o-matic.com/watch/cYf0lYAr8l

#5

I just need a simple answer, can the social icons at the foot of the page be resized and if so, how is that done - many thanks

#6

Hello @dpe,

"can the social icons at the foot of the page be resized and if so, how is that done "

Yes, it can be resize. Regretfully there is no setting in the theme that you can easily adjust the size of the icons at your footer. You need to add CSS code into X > Theme Options > CSS .

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The social icons in your footer is using this default css styling:

.x-colophon.bottom .x-social-global a {
    font-size: 18px;
}

Feel free to adjust the font size by making it larger, probably 30px.

gReCZndoRwCcel_m-PQ3-A

To learn more about the Font Size property, please check this out: https://www.w3schools.com/css/css_font_size.asp

We are unable to provide CSS code for the customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here .

If you are more interested in having control over all aspects of the footer I suggest that you consider the Pro theme’s Footer builder and you can use various elements to create a footer.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Thank you.

#7

that gave me part of the answer and I just added a margin to them, thanks

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.