change of image alignment on smaller displays

[kridgroup]

On this specific page - using the Executive Pro theme - I have two images, which on larger displays are aligned right:

https://www.kridconsulting.com/company/

Now, to improve readability on smaller screens, I have adjusted the text wrap using the following:

@media only screen and (max-width: 629px) {
.alignleft, .alignright {
clear: both;
float: none;
display: block;
}
}

How can I in the same context change the image alignment to e.g. left?

Thanks in advance!

https://www.kridconsulting.com/company/

[Sridhar Katakam]

You can see that each image can be uniquely identified using one of its classes.

Ex.: The Team image "wp-image-516". So you can write CSS for "img.wp-image-516" and set its float to left if you want to float it left from a specific width onwards.

---

Genesis Tutorials | Follow me on Twitter

[kridgroup]

Thanks!

But it seems I am not getting the syntax right.

My custom css now looks like this:

#genesis-Footer {
background-color: #ffffff;
}

.page-id-321 .entry-title, .page-id-298 .entry-title, .page-id-605 .entry-title, .page-id-603 .entry-title, .page-id-633 .entry-title, .page-id-632 .entry-title, .page-id-630 .entry-title, .page-id-635 .entry-title, .page-id-634 .entry-title, .page-id-618 .entry-title, .page-id-621 .entry-title, .page-id-615 .entry-title, .page-id-612 .entry-title, .page-id-651 .entry-title, .page-id-891 .entry-title {
display: none;
}

@media only screen and (max-width: 629px) {
.alignleft, .alignright {
clear: both;
float: none;
display: block;
}
}

@media only screen and (max-width: 320px) {
.gallery-columns-3 .gallery-item {
width: 100%;
margin-bottom: 20px;
}
}

I tried adding:

@media only screen and (max-width: 629px) {
img.wp-image-516 {
float: left;
}
}

But that does not change anything…

Any advise?

Thanks

[Sridhar Katakam]

I do not find that CSS on the site when inspecting with Firebug. Have you added it in child theme's style.css or in a custom.css?

---

Genesis Tutorials | Follow me on Twitter

[kridgroup]

Check style.css again now. i used the WordPress CSS editor before.

[Sridhar Katakam]

I searched for img.wp-image-516 in https://www.kridconsulting.com/wp-content/themes/executive-pro/style.css and do not find it.

---

Genesis Tutorials | Follow me on Twitter

[kridgroup]

You won't find it. I did not manage to get it work so i did not save it.
What I tried is what you see above: Adding the following at the end of style.css:

@media only screen and (max-width: 629px) {
img.wp-image-516 {
float: left;
}
}

What I need to know is how to get the syntax right to get the image aligned left on small displays.

[Sridhar Katakam]

Adding

@media only screen and (max-width: 629px) {

	img.wp-image-516 {
		float: left;
		margin-left: 0;
		margin-right: 10px;
	}

}

at the end in style.css in Firebug does float the image to the left with text moving to its right.

---

Genesis Tutorials | Follow me on Twitter

[kridgroup]

Thanks a lot!

Dirk

[Author]

Posts