Small Code Question

[CGI1984]

I am trying to modify an extension to only have the extension effect the site when someone is using a mobile device. So I added the following code to the .css file inside the theme folder of the extension, but unfortunately the extension is still having an effect on desktop devices:

Code: Select all

@media (max-width: 1000px) {
    
}

So the code is basically having no effect since the extension still loads on both desktop and mobile devices. Did I perhaps do something wrong in the above code?

Thanks

[Brf]

It would depend on how wide the web browser window is. Currently, my window is 1920px wide, but I could easily squeeze it down to under 1000.

What kind of tags are you putting in your css?

[CGI1984]

Thanks. I am trying to have the extension effect avatars on mobile devices only, but not desktops as I mentioned. I have changed the code to this, but still not working:

Code: Select all

img.avatar {
	border-radius: 50%;
}
@media only screen and (max-width: 600px) {
		}

Maybe it should be min-width 600px? - I get confused which direction I should be going.

Or maybe should it include?

Code: Select all

display: none!important;

ADDED:

Now I got the following and still not working:

Code: Select all

img.avatar {
	border-radius: 50%;
	display: none;
}
@media only screen and (min-width: 600px) {
		}

[Brf]

What css tags are you putting in there? If you have nothing in there, what would you expect it to change?

[CGI1984]

I don't have any. - But no surprise there. I don't know code. I am just learning a bit as I go.

Below is the original code that was in the .css file before I started hacking at it.

Code: Select all

img.avatar {
	border-radius: 50%;
}

img[src*="gravatar"] {
	border-radius: 50%;
}

Here is the extension: https://www.phpbb.com/customise/db/exte ... d_avatars/

[Brf]

A css file just tells the user's web browser how to display a document.

For instance, in prosilver's responsive.css we see:

Code: Select all

@media (max-width: 320px) {
	select, .inputbox {
		max-width: 240px;
	}
}

That means that if the webbrowser window is no more than 320px wide, then select boxes and anything with an .inputbox class will have a maximum width of 240px.

If you have nothing between the braces, then the user's webbrowser will have nothing to change.

[CGI1984]

I understand, thank you, But I still can't really write the code correctly I think.

Am I getting closer?

Code: Select all

img.avatar {
	border-radius: 50%;
	
@media only screen and (min-width: 600px) {
		.img.avatar {
			display: none!important;
		}

	}

[Brf]

That would hide the avatar if the user's webbrowser width is over 600px.
You need to take the dot off the front of .img though, or it will only apply to objects with a "class" of "img", not to img tags themselves.

[CGI1984]

Thanks. So maybe we want max-width (as I had it originally) and how many pixels would you use to have it only active on mobile devices?

[Brf]

That would depend on how wide the device's web browser is. prosilver's responsive.css has code for 320, 350, 430,500, etc.

[CGI1984]

I’ll give it a try. I’m not confident though in my ability to write the code. I was hoping someone might offer me a line or two of working code. So if it doesn’t work after one more try on my own I’ll probably just drop it. Thanks for your thoughts though. I can’t write code so I’m really just throwing darts at a dartboard in the dark and reaching the point of diminishing returns.

[Brf]

This isn't code though. It is just a stylesheet. What are you trying to accomplish?

[CGI1984]

I’m trying to take that extension I linked above to make avatars round and edit the css so that it only effects the small avatars that appear when a style becomes responsive and displays small avatars on mobile devices. I want those small avatars to be round, but on laptop and desktop screens I would like the avatars to display square as normal. Thanks.

[Brf]

That code is in the 700 section of responsive.css.
So you probably want to use 700 also.

Code: Select all

@media (max-width: 700px) {


.postprofile .avatar img {
		width: auto !important;
		height: auto !important;
		max-height: 32px;
	}



}

[CGI1984]

Thanks. I haven't gotten to the responsive.css file in the prosilver style folder yet, but I now changed the code in the .css file of the above extension to contain only the following:

Code: Select all

img.avatar {
	border-radius: 50%;
	
}
@media only screen and (max-width: 700px) {
		img.avatar {
		display: none !important;
		}

	}

The result is that both large avatars on desktops and laptops are round, as well as the smaller avatars on mobile devices that I wanted. It also completely removed round avatars from the recent topics extension I am running, which it something that was working before I put in this code. So it is doing only one thing I want and two things I don't want.

ADDED:

Ah, got it all working now. Using only the following code in the .css file of the round avatars extension gives me small round avatars inside topics and on topics listed in the recent topic list on mobile devices, which is what I want. It also leaves avatars in topics normal sized and square shaped on desktop and laptop computers, which is also what I want. No change needed it seems to the responsive.css file. I also tested on mobile devices in both vertical and horizontal orientation and works correctly for both. In addition, I then tested by setting the browser window on a desktop computer to various smaller sizes and in all cases the avatar stays square. So all is working now in every way it seems. Got lucky this time

Code: Select all

@media only screen and (max-width: 700px) {
		img.avatar {
		border-radius: 50%;
		}

	}