The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Topic Title overlaps Custom Topic Icon

View previous topic View next topic Go down

Solved Topic Title overlaps Custom Topic Icon

Post by Valoish on December 14th 2016, 10:16 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : http://prnt.sc/djhxzb
Who the problem concerns : All members
When the problem appeared : A few weeks ago
Forum link : http://www.canvasforums.com

Description of problem

The topic title overlaps the custom topic icons when on mobiles
http://prnt.sc/djhxzb
I thought I had fixed it before in this topic but the pagination was affected.


Last edited by Valoish on December 15th 2016, 4:06 pm; edited 1 time in total
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Topic Title overlaps Custom Topic Icon

Post by Luffy on December 15th 2016, 1:22 am

Hey @Valoish,

Try using the media tags for the mobile versions. For example you can use this:
Code:
@media (min-width:0) and (max-width:768px) { ... }
and in the tags to add some special codes for the
Code:
hanckidesc
image. Lets say that this is what you are looking for, then you should use this code:
Code:
@media (min-width:0) and (max-width:768px) {
  img.hanckidesc { margin-top:-5px!important}
}
This will change only the mobile version. But in order for it to change, because you have the tag in the general CSS it won't change unless you add the hanckidesc image code in the media tags for your screen, for example this tag:
Code:
@media (min-width:769px) and (max-width:1024px) { ... }


Although i know you know of codes but anyways i'm trying to explain this so other members can use this code. So in other words, you can use this code:
Code:
@media (min-width:0) and (max-width:768px) {
  img.hanckidesc { margin-top:-5px!important}
}
@media (min-width:769px) and (max-width:1024px) {
  img.hanckidesc { margin-top:-15px!important}
}

Now there may be a chance this will not work still. That may be because as i said above the general code affects all screens since it's not in a media tag. So if the above don't work, then i would suggest you remove only the margin-top line from the general code and add the media tags. That way the forum will read the margin-top code through the media tags. Wink :rose:





avatar
Luffy
Manager
Manager

Male Posts : 4878
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Topic Title overlaps Custom Topic Icon

Post by Valoish on December 15th 2016, 1:54 am

Hi again @Luffy c:

I played around with the mobile version in Dev Tools and the CSS you gave targets the Custom Icon o; What I'd prefer to do is to target the thread title instead, and shift the second line that's overlapping the image to the right by about 36px - 40px.
I tried doing the following but the text wrap was still messing up x_x
Code:
a.topictitle { margin-left: -40px; } /* To shift the linked title 40px to the left */
h2.topictitle { padding-left: 40px; } /* To push the container of the title 40px to the right */
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Topic Title overlaps Custom Topic Icon

Post by Luffy on December 15th 2016, 1:18 pm

@Valoish, those codes will move all the titles to the left as you order them to. The ones that don't have an icon too. The best way is to move the icon just a little bit instead of moving the entire page and all the titles to the right 40 px; That will look something like this:


If you want it to look like this, you'd want to add in the media tags these codes:
Code:
@media (min-width:0) and (max-width:768px) {
  a.topictitle {
    display: inline-block;
    margin-left: 0px;
    width: 250px;
    margin-right: -165px;
  }
}
@media (min-width:769px) and (max-width:1024px) {
  a.topictitle {
    display: normal;
    margin-left: 0;
    width: auto;
    margin-right: 0;
  }
}





avatar
Luffy
Manager
Manager

Male Posts : 4878
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: Topic Title overlaps Custom Topic Icon

Post by Valoish on December 15th 2016, 4:06 pm

Thanks @Luffy! ^^
That code shifted the Global Ann titles as well but thats fine~ c:
I changed the code you gave me a little bit to match the media queries I had in the CSS before:
Code:
/* Shift Titles - Mobile */
@media only screen and (min-device-width: 320px) and (max-device-width: 485px) {
  a.topictitle {
    display: inline-block;
    margin-left: 0px;
    width: 250px;
    margin-right: -165px;
  }
}
@media only screen and (min-device-width:486px) and (max-device-width:1024px) {
  a.topictitle {
    display: normal;
    margin-left: 0;
    width: auto;
    margin-right: 0;
  }
}
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Topic Title overlaps Custom Topic Icon

Post by Luffy on December 15th 2016, 6:08 pm

I'm glad it worked as you wanted it @Valoish! I told you that moved all the titles, even if they didn't have any icon. Smile Since this is solved:

Problem solved & topic archived.
Please read our forum rules: ESF General Rules





avatar
Luffy
Manager
Manager

Male Posts : 4878
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum