Return to previous page

BLOG ICONS FOR BLOG IMAGE NOT ALIGNING IN CIRCLES ON MOBILE

This topic has 4 replies, 3 voices, and was last updated 9 years, 5 months ago ago by Eva Kemp

Jimbo

Participant

June 19, 2015 at 12:06

Hi guys,

I noticed that that the little circles on the blog images are not aligned when using the mobile, they are not staying inside the circles?

Blog page in private

Please, contact administrator
for this information.

#70448 Copied

3 Answers
Jack Richardson

Support staff

June 19, 2015 at 13:37
Hello,

Please add this code in your child style.css:
```
@media (max-width: 480px) {.wp-picture .zoom a:first-child span::before {
    margin-top: 20px !important;
    margin-left: -2px !important;
}
.wp-picture .zoom a:last-child span::before {
    margin-top: -8px !important;
    margin-left: -2px !important;
}}
```
Best regards,
Jack Richardson.
#70462 Copied
Jimbo

Participant

June 19, 2015 at 19:02

Thanks that worked for the iPhone!

Just realised that that on the iPad in landscape the icons are not displaying properly?

How about for the image when inside the actual blog post, there is no symbol to enlarge the image?

#70534 Copied
Eva Kemp

Support staff

June 19, 2015 at 19:44
Hello,

Please add this code as well:
```
@media only screen and (max-width: 1025px) and (min-width: 980px) {
.wp-picture .zoom a:first-child span::before { 
  content: "\f002" !important;
  font-family: "FontAwesome";
  margin-top: 22px !important;
  margin-left: -2px !important;
}
.wp-picture .zoom a:last-child span::before {
  margin-top: -7px;
  margin-left: -2px;
}}

@media (max-width: 480px) {.wp-picture .zoom a:first-child span::before {
    margin-top: 20px !important;
    margin-left: -2px !important;
    content: "\f002" !important;
}}
```
Regards,
Eva Kemp.
#70542 Copied
Viewing 4 results - 1 through 4 (of 4 total)