2 replies [Last post]
tnasch
tnasch's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT+1
Joined: 2014-07-15
Posts: 2
Points: 3

Hi, as you'll see I'm relatively new at this.

I've had a website built that I administer using a custom CMS.

To customise the pages beyond the basic controls (background, inline picture & text content) there is an 'Embed' box that allows me to place (for instance) additional images.

I am attempting to specify the positioning of these images depending on whether being view on a smartphone or not. Having originally positioned an image using css (in under a heading). I realised that this did not look good on a smartphone so looked into media queries.

I quickly discovered that not only would I need to set a media query for the smartphone but would have to put my original code in desktop media query section in order (i hoped) for the phone NOT to display the original positioned image.

What I am getting now is all images, whether set to show on desktop OR smartphone, showing on BOTH desktop & smartphone.

I'm at a loss as to where I am going wrong, any help greatly appreciated!

This is the code I have in my Embed box

<style type="text/css">
/* #### Desktops #### */
@media screen and (min-width: 1024px)
{
frontpage{
position: absolute;
top: 30%;
left: 50%;
}
 
{morenews{
position: absolute;
top: 16%;
right: 1%;
}
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 640px) and (orientation: portrait)
{morenewsmob{
position: absolute;
top: 16%;
right: 1%;
}
 
</style>
 
<morenews>
<img  src=" <a href="https://dl.dropboxusercontent.com/u/56404046/News_Embed.png">
</morenews>
 
<morenewsmob>
<img" rel="nofollow">https://dl.dropboxusercontent.com/u/56404046/News_Embed.png">
</morenews>
 
<morenewsmob>
<img</a>  src=" <a href="https://dl.dropboxusercontent.com/u/56404046/MoreNewsMOB.png">
</morenewsmob>
 
<frontpage>
<img" rel="nofollow">https://dl.dropboxusercontent.com/u/56404046/MoreNewsMOB.png">
</morenewsmob>
 
<frontpage>
<img</a> src=" <a href="https://dl.dropboxusercontent.com/u/56404046/FrontPageNews.png">
</frontpage>
 
" rel="nofollow">https://dl.dropboxusercontent.com/u/56404046/FrontPageNews.png">
</frontpage>
 
</a>

This is the website, click the News tab to view the results.

Thanks

tnasch
tnasch's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT+1
Joined: 2014-07-15
Posts: 2
Points: 3

Sorry didn't put the website

Sorry didn't put the website link in it here:
http://nesbethreggae.com

tommy5725
tommy5725's picture
Offline
newbie
Last seen: 7 years 17 weeks ago
Timezone: GMT-4
Joined: 2014-08-03
Posts: 3
Points: 5

RE: Media queries

Now I'm no authority, but I believe you can give everything you want to hide a class or an ID, and then set the display to none in your media query.

Put something like this in your picture/content you would like to hide:

And something like this in the CSS. (style.css)

.hidemobile {
display: none;
}

Also here is a video that helped me a lot:

https://www.youtube.com/watch?v=BIz02qY5BRA

Good Luck,
Töm

Also an ID might be better than a class. Hopefully someone more knowledgeable chimes in.