[Resolved] Images refuse to scale on mobile

[Michael]

Hi all,

I have been trying to get this to work for hours to no avail. On this page, when viewed in mobile the images remain full size and stuff up the page formatting as result:

https://reclaimdesign-383226.easywp.com/faq.html

However it seems to be working fine on this page when viewed on mobile – the images appear to be responsive:

https://reclaimdesign-383226.easywp.com/about-reclaim-design.html

I can’t see the wood for the trees anymore. Please can anyone tell me what I am missing?

I have this CSS on @media only screen and (max-width: 768px):

img {
	height: auto;
	max-width: 100%;
}

Michael.

[Leo]

Hi there,

Static images should be responsive by default.

Can you disable all plugins except GP Premium so I can have a better look?

I see there is some lazy load option going on.

[Michael]

Hi Leo,

When I disabled lazy loading last time I had to it prevented all the images from loading and I had to delete them all from the media library….. OK, I will give it another go and turn off all the plugins then. Fingers crossed (or I might just cry)

[Michael]

Hi Leo, I’ve turned them all off now except the GP plugin. For some reason all the formatting has gone wonky now though?

[Michael]

I turned off the simple CSS plugin too – will that have stuffed it? Looks like lots of the site is stuffed now that I’m looking at it. Seriously hoping that it isn’t irretrievable or I’m going to tear out what little (grey) hair I have left!

Hopefully you can still access the CSS. If not, here is what I have done so far:

/*--------------------------------------------------------------
# Local Fonts
--------------------------------------------------------------*/

@font-face {
	font-family: "Carrois Gothic";
	font-style: normal;
	font-weight: 400;
	src: local("Carrois Gothic Regular"), local("CarroisGothic-Regular"),
	   /*url("https://reclaimdesign-383226.easywp.com/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff2") format("woff2"),*/ /* Chrome 26+, Opera 23+, Firefox 39+ */
	   /*url("https://reclaimdesign-383226.easywp.com/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff") format("woff");*/ /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	   url("/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
	   url("/wp-content/uploads/fonts/carrois-gothic-v10-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans Regular"), local("OpenSans-Regular"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-regular.woff2") format("woff2"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-regular.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	src: local("Open Sans Italic"), local("OpenSans-Italic"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-italic.woff2") format("woff2"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-italic.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	src: local("Open Sans Bold"), local("OpenSans-Bold"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-700.woff2") format("woff2"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-700.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 700;
	src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-700italic.woff2") format("woff2"),
	   url("/wp-content/uploads/fonts/open-sans-v17-latin-700italic.woff") format("woff");
}

@font-face {
	font-display: block;
	font-family: "Ico Moon";
	src: local("☺"),
	url("/wp-content/uploads/fonts/icomoon.eot?hrvocs"),
	url("/wp-content/uploads/fonts/icomoon.eot?hrvocs#iefix") format("embedded-opentype"),
	url("/wp-content/uploads/fonts/icomoon.ttf?hrvocs") format("truetype"),
	url("/wp-content/uploads/fonts/icomoon.woff?hrvocs") format("woff"),
	url("/wp-content/uploads/fonts/icomoon.svg?hrvocs#icomoon") format("svg");
	font-style: normal;
	font-weight: normal;
}

/*--------------------------------------------------------------
# General Elements
--------------------------------------------------------------*/

h1 {
	margin: 0;
	text-align: center;
}

h2 {
	margin: 0;
	padding: 0 0 15px 0;
}

h3 {
	border-bottom: 1px dotted #d0d0d0;
	display: inline-block;
	font-style: italic;
	font-weight: bold;
	line-height: 1.25em;
	margin: 0 0 20px;	
	padding: 20px 0 5px;
}

table, th, tr, td {   /* Reset padding being set elsewhere */
	border: none;
	padding: 0;	
}

header {
	border-bottom: 1px solid #d0d0d0;
	border-top: 1px solid #d0d0d0;
	margin: 25px 0 35px 0;
	padding: 25px 0;
	width: 100%;
}

p {
	padding: 0;	
}

img {
	padding: 0;
	margin: 0;	
	vertical-align: middle;
}

video {
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

.main-navigation .main-nav ul li > a {
	transition: all .3s ease;
	-moz-transition: all .3s ease;
  	-o-transition: all .3s ease;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: all .3s ease;
}

.main-navigation .main-nav ul li.search-item.active > a {  /* Search Box */
	transition: opacity .3s ease;
	-moz-transition: opacity .3s ease;
  	-o-transition: opacity .3s ease;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity .3s ease;	
}

.main-navigation .main-nav ul li.search-item.active > a:hover {
	opacity: 0.7;
}

.navigation-search input[type="search"], navigation-search input[type="search"]:focus {
	opacity: 1;
}

.navigation-search input[type="search"]::placeholder {
  	color: #fff;
}

.navigation-search input[type="search"]::-webkit-input-placeholder {
	color: #fff;
}

.navigation-search input[type="search"]::-moz-placeholder {
	color: #fff;
}

.navigation-search input[type="search"]::-ms-placeholder {
	color: #fff;
}

/*--------------------------------------------------------------
# Off Canvas Panel Menu
--------------------------------------------------------------*/

body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
	transform: translate3d(400px, 0, 0);
    -webkit-transform: translate3d(400px, 0, 0);
    -moz-transform: translate3d(400px, 0, 0);
    -ms-transform: translate3d(400px, 0, 0);
    -o-transform: translate3d(400px, 0, 0);  
}
body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
	transform: translate3d(-400px, 0, 0);
    -webkit-transform: translate3d(-400px, 0, 0);
    -moz-transform: translate3d(-400px, 0, 0);
    -ms-transform: translate3d(-400px, 0, 0);
    -o-transform: translate3d(-400px, 0, 0);
}

body .main-navigation.offside {
    width: 400px;
}

body .offside--left {
    left: -400px;
}   

body .offside--right {
    right: -400px;
}

body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 395px;
}

/*--------------------------------------------------------------
# Outer Container For Content Area
--------------------------------------------------------------*/

#page.hfeed.site.grid-container.container.grid-parent {  /* Ditch white space in container which was causing alignment issues */
	border: 1px solid #ff0000;
	margin: 0 auto;
	padding: 0;	
	width: 960px;
}

/*--------------------------------------------------------------
# Header Widget Area Inside Container
--------------------------------------------------------------*/

#header-content {
	margin: 0;
	padding: 0;
	width: 100%;
}

.wp-block-columns {
	margin: 0;	
	padding: 0;
}

.wp-block-column {
	margin: 0;
	padding: 0;	
}

.likelinks {
	height: 100%;
	margin: 0 0 0 8px;
	padding: 0;
	width: 100%;
}

#openbtn-container {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: right;
	vertical-align: middle;
	width: 100%;
}

/*--------------------------------------------------------------
# Social Media Widgets
--------------------------------------------------------------*/

[class^="icon-"], [class*=" icon-"] {
	font-family: "Ico Moon" !important;  /* Use !important to prevent issues with browser extensions that change fonts */
	font-style: normal;
	text-transform: none;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	-moz-osx-font-smoothing: grayscale;  /* Better font rendering */
	-webkit-font-smoothing: antialiased;
}

.icon-plus:before {
  	content: "\ea0a";
}

.icon-cross:before {
  	content: "\ea0f";
}

.icon-mail4:before {
  	content: "\ea86";
}

.icon-google:before {
  	content: "\ea88";
}

.icon-facebook:before {
  	content: "\ea90";
}

.icon-facebook2:before {
  	content: "\ea91";
}

.icon-instagram:before {
  	content: "\ea92";
}

.icon-whatsapp:before {
  	content: "\ea93";
}

.icon-twitter:before {
  	content: "\ea96";
}

.icon-pinterest:before {
  	content: "\ead1";
}

.icon-pinterest2:before {
  	content: "\ead2";
}

.icon-paypal:before {
  	content: "\ead8";
}

.fa {
	display: inline-block !important;
	font-size: 24px;
	margin: 0 2px 10px;
	padding: 15px 5px 5px 10px;
  	text-align: center;
  	text-decoration: none;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
}

.fa:hover {
	opacity: 0.7;
}

.fa-facebook {
	color: #4267b2 !important;
}

.fa-twitter {
	color: #55acee !important;
}

.fa-pinterest {
	color: #cb2027 !important;
}

.fa-whatsapp {
	color: #25d366 !important;
}

/*--------------------------------------------------------------
# Open Button For Sticky Sign Up Pop Up
--------------------------------------------------------------*/

.openbtn {
	color: #539c22; 
	cursor: pointer;
	display: inline-block !important;
	font-size: 48px;
	line-height: 35px;
	margin: 0 2px 10px;
	padding: 15px 22px 5px 5px;
  	text-align: center;
  	text-decoration: none;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;	
}

.openbtn:hover {
	opacity: 0.7
}

/*--------------------------------------------------------------
# Page Wrapper For No Columns Content Area
--------------------------------------------------------------*/

#page-content {
	border: 1px solid #00F;
	margin: 0;
	padding: 0;
	width: 100%;
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/

table.header {
	border-collapse: collapse;
	border-spacing: 0;
	border-width: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

table.text {
	border-collapse: collapse;
	border-spacing: 0;
	border-width: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

table.text th, table.text td {
  	text-align: justify;
	text-justify: inter-word;
}

table.text a {
	border-bottom: 1px dotted #539c22;	
	display: inline-block;
	line-height: 1.3em;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
  	-o-transition: opacity .3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity .3s ease-in-out;
}

table.text a:hover {
	opacity: 0.7;
}

table.text td.center {
	border: 1px solid #C0F;
	margin: 0;
	padding: 10px;
  	text-align: center;
	width: 100%;	
}

table.text td.left {
	margin: 0;
	padding: 0;
  	text-align: left;	
}

/*table.text img {
	height: auto !important;
	max-width: 100% !important;
	overflow: hidden !important;
}*/

/*--------------------------------------------------------------
# Footer Bar Widget
--------------------------------------------------------------*/

.sharelinks {
	margin: 15px 0;	
	text-align:	center;
}

/*--------------------------------------------------------------
# Footer Area
--------------------------------------------------------------*/

.sitemap_link {
	border-top: 1px solid #d0d0d0;
	padding: 15px 0;
}

.sitemap_link a {
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
  	-o-transition: opacity .3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity .3s ease-in-out;	
}

.sitemap_link a:hover {
	opacity: 0.7;
}

.nap_info {
	font-size: 12px;
	padding: 0 10px 10px;
}

/*--------------------------------------------------------------
# Sticky Sign Up Pop Up After Footer Content
--------------------------------------------------------------*/

.signup {
	bottom: 2%;
	display: none;
	margin-right: -15px !important;
	max-width: 280px;
  	position: fixed;
	right: 2%;	
  	z-index: 9999;	
}

.signup-header {
	background: #539c22;
	border: 1px solid #6db240;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: "Carrois Gothic", sans-serif;
	font-size: 24px;
  	padding: 25px 15px;
	text-transform: uppercase;
}

.closebtn {
	color: #fff;
	cursor: pointer;
	font-size: 48px;
  	position: absolute;	
  	right: 10px;
	top: -15px; 
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;	
}

.closebtn:hover {
	opacity: 0.7
}

.signup-container {
  	background-color: #6db240;
	border-radius: 0 0 10px 10px;
  	color: #fff;
	padding: 15px;
}

.signup-container input {
    border: 1px solid #d0d0d0;
	border-radius: 5px;
	cursor: auto;
	font-family: "Open sans", sans-serif; 
	font-size: 16px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.signup-container .button {
	background-color: #539c22; 
	border: none;
	border-radius: 5px;
	color: #fff !important;
	cursor: pointer;
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	margin-top: 10px;
	padding: 0;  /* Necessary to center button text vertically! */
	text-align: center;
	transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
  	-o-transition: background-color 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: background-color 0.3s ease-in-out;
    width: 100% !important;
}

.signup-container .button:hover {
	background-color: rgba(83, 156, 34, 0.7);  /* Adjust background only, not text */
}

.signup-container .mc-field-group input {
    display: block;
    padding: 8px 0;
    text-indent: 2%;
	width: 100%;
}

/*--------------------------------------------------------------
# Specific Elements
--------------------------------------------------------------*/

.round_edges {
	border: 1px solid #d0d0d0;
  	border-radius: 10px;
}

#content.site-content {
	padding: 0;
}

.entry-content {
	padding-bottom: 0;
	margin-bottom: 0;
}

/*#post-406 > .inside-article {
	width: 960px;
}*/

footer.site-info {
	padding: 0;
}

h1.entry-title {	
	margin-top: 0;
}

.entry-content > [class*="wp-block-"]:not(:last-child) {
	margin-bottom: 0;	
}

.wp-block-column:not(:first-child) {
	margin-left: 0;	
}

.two-col {  /* For H2 and p on 2 col pages */
	padding-left: 10px;	
}

.custom-work {
	border: 1px dotted #d0d0d0;
	border-radius: 10px;
	margin: 15px 250px;
	padding: 25px;
	text-align: center;
}

/*--------------------------------------------------------------
# Search Results Page
--------------------------------------------------------------*/

.inside-article > .entry-content > .search-form > label > input.search-field {
	background: #fff;
    border: 1px solid #d0d0d0;
	border-radius: 5px;
	cursor: auto;
	font-family: "Open sans", sans-serif; 
	font-size: 16px;
	margin-top: 15px;
	width: 350px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.search-form input[type="submit"] {
	background: #666;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	margin-top: 15px;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.search-form input[type="submit"]:hover {
	cursor: pointer;
	opacity: 0.7;
}

.inside-right-sidebar {
	display: none;	
}

.no-results, .not-found {
	margin: 0;
	padding: 0;
  	text-align: justify;
	text-justify: inter-word;
	width: 960px;	
}

.one-container:not(.page) .inside-article {
	padding: 0;
}

.entry-content {
	padding: 0 10px;	
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media only screen and (max-width: 768px) {
	
	/*--------------------------------------------------------------
	# General Elements
	--------------------------------------------------------------*/
	
	img {
		height: auto;
		max-width: 100%;
	}
	
	/*img[Attributes Style] {
		height: auto;
		width: 100%;	
	}*/
	
	video {
		height: auto;
		max-width: 100%;
	}
	
	/*--------------------------------------------------------------
	# Off Canvas Panel Menu
	--------------------------------------------------------------*/
	
	ul .sub-menu .toggled-on {
	 	padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
		margin-bottom: 0;	
	}

	.slideout-navigation.main-navigation .main-nav ul li a {
		text-transform: uppercase;	
	}
	
	.slideout-navigation.main-navigation .main-nav ul ul li a {
		font-size: 25px;
	}
	
	.main-navigation .main-nav ul ul li a {
		padding: 4px 23px;	
	}
	
	
	
	.main-navigation ul ul {
		box-shadow: 0 0 0;
	}
	
	.slideout-navigation ul ul {
		margin: 0;
		padding-left: 20px;
		box-sizing: border-box;
	}
	
	/*--------------------------------------------------------------
	# Outer Container For Content Area
	--------------------------------------------------------------*/
	
	#page.hfeed.site.grid-container.container.grid-parent {
		width: 100%;
	}

	/*--------------------------------------------------------------
	# Header Widget Area Inside Container
	--------------------------------------------------------------*/
	
	.likelinks {
		margin: 0 0 0 5px;
	}

	#openbtn-container {
		margin-top: -75px;
	}
	
	/*--------------------------------------------------------------
	# Open Button For Sticky Sign Up Pop Up
	--------------------------------------------------------------*/

	.openbtn {
		padding: 15px 18px 5px 5px;	
	}
	
	/*--------------------------------------------------------------
	# Sticky Sign Up Pop Up After Footer Content
	--------------------------------------------------------------*/
	
	.signup {
		margin-left: 2%;
  		margin-right: 2% !important;
		max-width: 100%;
	}
	
	/*--------------------------------------------------------------
	# Search Results Page
	--------------------------------------------------------------*/
	
	.no-results, .not-found {
		width: 100%;	
	}
	
	.search-form.navigation-search.nav-search-active > input.search-field {
		height: 60px;
	}
	
	.inside-article > .entry-content > .search-form > label > input.search-field {
		width: 100%; 
	}
	
	.search-form input[type="submit"] {
		width: 100%; 
	}

	/*#post-406 > .inside-article {
		width: 100%;
	}*/
	
}

[Michael]

Not sure why but it’s not included all the css

[Michael]

There is one plugin I cannot turn off as it is provided by Namecheap (my domain and Easy WP package provider), but I cleared it’s cache.

EasyWP Plugin

Integrates with EasyWP to guarantee website performance with caching, monitoring and other services.
Version 0.4.8 | By Namecheap, Inc. | Visit plugin site

[Leo]

I’m seeing error 404 in both links provided in the original topic now.

Can you double check?

[Michael]

I don’t know why it did that (it did for me also), but when you click About or FAQ in the menu it goes back to the page (without proper formatting)

[Michael]

I’m going to have to turn the plugins back on now though as I need to make some progress today. I will leave off the autooptimizer one. I’m hoping that by turning them back on my site will revert to where I left it.

[Michael]

Hi Leo, I’ve turned the Simple CSS, Updraft Backup, Code Snippets and Relevanssi plugins back on only. The Autooptimizer one is off.

[Michael]

Hi Leo,

I’ve added in the css for the table of contents at the top of the FAQ page and the formatting on that is all out of whack too (it works perfectly on reclaimdesign.org). The sliding content seems to be pushed over to the right, in the same direction as the images which don’t resize, so I wonder if it is a related problem.

https://www.dropbox.com/s/vtqfi24tts71gyd/table-of-contents-formatting1.jpg?dl=0

[Michael]

Hi again Leo, just posting updates as I’m working on it. I’ve started commenting out code and slowly adding back in, and I think I have worked out what was causing the layout to go pete tong. It’s a class I had in from my other site (which weirdly works fine on that):

.custom-work {
	border: 1px dotted #d0d0d0;
	border-radius: 10px;
	margin: 15px 250px;
	padding: 25px;
	text-align: center;
}

Onwards…

[Leo]

Glad you’ve figured out 🙂

[Michael]

Thanks for your help Leo

[Author]

Posts