How to Correctly Show Company Logos on Mobile Screens

This is theme-dependant; it depends what your theme is doing to display (or hide) the company logos. I suggest asking your theme author for help.

Hi @richardmtl – could you explain more about how it is theme-dependent? The CSS that I am overriding is from WP Job Manager (wp-job-manager > assets > css > frontend.css):

@media only screen and (max-width:767px) {
     ul.job_listings li.job_listing a img.company_logo,
    ul.job_listings li.no_job_listings_found a img.company_logo {
        visibility: hidden
    }

Hi Hastibe!

Sorry, I missed this thread yesterday.

So, to answer your question, yes we include that CSS, but over-riding it is what will be theme-dependant. If your theme isn’t handling it, then I’d suggest that instead of using !important, try the same rule but changed:

@media only screen and (max-width:767px) {
     ul.job_listings li.job_listing a img.company_logo,
    ul.job_listings li.no_job_listings_found a img.company_logo {
        visibility: visible
    }

That should fix it for you, I suspect.

@richardmtl — thanks, but both the basic .company_logo {visibility:visible!important;} code and more specific code that you provided work; that hasn’t been the issue, happily.

The issue I’m wondering about is that when using either code (with your code, this just happens on mobile screens, because of the max-width specification), the company logos now remain showing when the next page of the job listings is loading, instead of disappearing while the next page of job listings load (like usual).

What would be a way to display the company logos on all screen sizes, which wouldn’t show the logos (of the current page) while the next page of the job listings load? It just looks really odd this way!

Hi,

So I’ve tried to see what it is you mean, but frankly, I don’t get it. On my test site, using a default WordPress theme (Twenty Sixteen), nothing disappears when I click “load more listings”; if something is disappearing, then I do think it’s because of your theme. Could you include a link to your job listings so I can see what you’re talking about? Thanks.

Hi @richardmtl — hopefully what I’m talking about will make more sense, once you see it happen on my job listings (here’s a link to them: https://tiny.cc/hvvk8y); just view them on a web browser where you’ve reduced the width of the window to less than 768px or on a mobile device, and click on page 2 (or any other page) of the job listings, to (hopefully) see what I’m going on about.

Just an extra note, to hopefully reduce any confusion: what you should see (on a screen of less than 768px) is that the company logos (using either your or my CSS code; I’m using yours on my site now) remain visible while the next page (my listings are paginated) is loading, when they shouldn’t (or I wish they wouldn’t, at least).

Hi @hastibe!

Instead of visible, try inherit:

@media screen and (max-width: 767px) {
	ul.job_listings li.job_listing a img.company_logo,
	ul.job_listings li.no_job_listings_found a img.company_logo {
		visibility: inherit;
	}
}

Jake

Yes, that does it! Thank you @jakeom and @richardmtl for all your help!

hi @jakeom ,
Thanks for your solution. It worked for me and company logo appeared on mobile screens but there is a minor issue. Logos appearance is overlapped on job titles. I tried to add position: relative but it disturbs the layout of location, job types etc.
How can we fix it?

@mrehman — in case it is helpful, here is the CSS (and then some) that we added to resolve the issues you mentioned. You’ll probably need to experiment quite a bit to get it to display on different size screens the way you want it to! If you notice issues with our code below or find a better way to do it, please let us know, too.

/* Increase size of logo and make appropriate adjustments on job listings page */

.job_listings .company_logo {
	height: 70px!important;
	width: 70px!important;
	margin-left: -5px!important;
}
@media screen and (min-width: 768px) {
.position {padding-left: 65px!important;}
.job_listings .company {height: 35px}
}

/* Show company logo on job listings page on mobile screens and make appropriate adjustments */

@media screen and (max-width: 767px) 
{ 
ul.job_listings li.job_listing a img.company_logo,
    ul.job_listings li.no_job_listings_found a img.company_logo {
        visibility: inherit;
}
}

@media screen and (min-width: 425px) and (max-width: 767px) 
{ 
	.position {padding-left: 80px!important;}
}

@media screen and (max-width: 424px) {
.job_listings .position {
		float:right!important;}
	
	.job_listings .location {
		float:left!important; 
		margin-top: 70px;
		margin-left: -30px; 
		padding-left: 30px;
		width: 100px!important;
			line-height: 1.4em!important;
	}
	
.job_listings .meta  {float:left!important; clear:left; 
	margin-left: -80px!important; 
	padding-left: 40px;
	width: 150px!important;
	line-height: 1.4em!important;}
	
.job_listings a {padding-bottom: 6px!important;
}
}

/*Make job listings page wider */

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
	.page-content .job_listings
  [class*="post-"] {
margin-right: -5px;
margin-left: -5px;
  }
	.page-content .job_filters 
	{margin-left:-5px;
	margin-right:-5px;}
}
 /* For desktop screens */
.page-content .job_listings
	{
margin-left:-20px;
	margin-right:-20px;
}

/* Adjust size and location of company logo image in job listings */

img.company_logo { border-radius: 5px; background-color: #fff!important;  width: 60px!important; height: 60px!important;}

.job_listings img.company_logo {
margin-top:-6px; 
margin-left:-8px;
}

• This reply was modified 5 years, 6 months ago by hastibe.
• This reply was modified 5 years, 6 months ago by hastibe.