Public Forums 71,145 posts

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#205588

Ok, I know that PC viewing and mobile viewing are going to look different but some things just don’t ad up. For instance, the lead image is way to big on the mobile view (on my phone). Is there some way to have ths fit.

Thanks

---

Attachments:

1. 
2. 
3. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#567389

That is custom html module and you have to change some css style on that

Open templates/purity_iii/css/custom.css file and add new rule

@media (max-width: 767px) {
.page-masthead .container .custom img {
width: 100%;
}
}

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#567766

That worked great for the left image but I do not know if you can look but the right image (spinning image) is now larger and distorted. Any ideas?

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#732873

That worked great for the left image but I do not know if you can look but the right image (spinning image) is now larger and distorted. Any ideas?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#567814

Try to change this again, it will work fine with left and right images on your site

Open templates/purity_iii/css/custom.css file

find and change

@media (max-width: 767px) {
.page-masthead .container .custom img {
width: 90%;
}
}

to

@media (max-width: 767px) {
.page-masthead .container .custom img {
width: initial;
}
}


2 users say Thank You to Ninja Lead for this useful post

1. sirbogoff
2. griong

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#732920

Try to change this again, it will work fine with left and right images on your site

Open templates/purity_iii/css/custom.css file

find and change

@media (max-width: 767px) {
.page-masthead .container .custom img {
width: 90%;
}
}

to

@media (max-width: 767px) {
.page-masthead .container .custom img {
width: initial;
}
}


2 users say Thank You to Ninja Lead for this useful post

1. sirbogoff
2. griong

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#572059

Sorry about not answering there.. Life gets in the way.. That looks good except for the main image on my phone. The spinning image fits great but the Vohne Liche image (with the dog in it) is still a little big for a smart phone.. Any help would be gratefully appreciated. 🙂

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#737099

Sorry about not answering there.. Life gets in the way.. That looks good except for the main image on my phone. The spinning image fits great but the Vohne Liche image (with the dog in it) is still a little big for a smart phone.. Any help would be gratefully appreciated. 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#572172

@sirbogoff: Can you give me screenshot of the problem you mentioned above? I will help you to check it

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#572224

As you can see the image is off the screen on the right.. Hope this helps.

---

Attachments:

1. 

[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#737264

As you can see the image is off the screen on the right.. Hope this helps.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#572275

<em>@sirbogoff 475560 wrote:</em><blockquote>As you can see the image is off the screen on the right.. Hope this helps.</blockquote>

You can fix it by opening templates/purity_iii/css/custom.css file and adding new rule

@media (max-width: 767px) {
.page-masthead .container .custom img:nth-child(2) {
width: 100% !important;
}
}


[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#737312

<em>@sirbogoff 475560 wrote:</em><blockquote>As you can see the image is off the screen on the right.. Hope this helps.</blockquote>

You can fix it by opening templates/purity_iii/css/custom.css file and adding new rule

@media (max-width: 767px) {
.page-masthead .container .custom img:nth-child(2) {
width: 100% !important;
}
}


[sirbogoff Friend sirbogoffJoin date: March 2015Posts: 80Downloads:4Uploads:15 Thanks: 31 Thanked: 1 times in 1 posts]

#572379

Tried that but it is still the same.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#572713

I checked directly the templates/purity_iii/css/custom.css file

change from


td, tr td {
border-top: 1px solid rgba(221, 221, 221, 0); @media (max-width: 767px) {
.page-masthead .container .custom img:nth-child(2) {
width: 100% !important;
}
}
}


to

td, tr td {
border-top: 1px solid rgba(221, 221, 221, 0);
} @media (max-width: 767px) {
.page-masthead .container .custom img:nth-child(2) {
width: 100% !important;
}
}


---

Attachments:

1. 

[Author]

Posts