Mobile Phone – Job title

  • Resolved marimanga

    (@marimanga)


    4 years, 11 months ago

    Hi,

    Job titles on homepage are different on different phones, i use this code but this code did not fix titles because i want to appear on the left and on iphone 6s it is on the right aswell other phones too, Any way to appear same on different phones?

    Check screenshot.
    ios 6s
    https://prnt.sc/qf0ax7

    ios 5s
    https://prnt.sc/qf0bev

    .job_listings .company_logo {
	height: 60px!important;
	width: 60px!important;
		margin-left:1px!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: 325px) 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: 10px; 
		margin-left: 80px;
		width: 70px!important;
			line-height: 1.4em!important;
	}
	
.job_listings .meta  {float:left!important; clear:left; 
	margin-left: 98px!important; 
	width: 150px!important;
	line-height: 1.4em!important;}
	
.job_listings a {padding-bottom: 8px!important;
}
}

 /* For desktop screens */
.page-content .job_listings
	{
margin-left:-20px;
	margin-right:-20px;
}

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

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Changing this CSS…

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

    …to this (or something similar) might help:

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

    Use this tool to trouble-shoot: https://developers.google.com/web/tools/chrome-devtools/css

    • This reply was modified 4 years, 10 months ago by hastibe. Reason: Fixed typo
    Plugin Contributor Richard Archambault

    (@richardmtl)

    I’m marking this thread as Resolved as it’s been more than a month since the last reply. If you still need help, please do reply again and mark the thread as Unresolved!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Phone – Job title’ is closed to new replies.