Metatag question & funky CSS aside problem (not responsive)


(Judy Kennedy) #1

I just completed a website in RW7 using mainly stacks pages (I’m a DIY person. - not a developer.) It works well on computer screens but I’m having some problems with IOS devices. While the pages are all responsive, some of the images on an “aside” being used as background are not. These images are listed in CSS code on the CSS panel as per the thememaker’s instructions. Any suggestions on how to fix this? If you want to take a look, it’s www.judykennedy.com - the drop down menu pages on “law” page. Also, when putting metadata in the tag panel, does one write “keyword” or “keywords” plural. Then, do you have to list each keyword individually, or can you put them all on the same line separated by commas?

Thank you.


(Doug Bennett) #2

Keywords meta tags aren’t used by search engines anymore (been about a decade). But they don’t hurt you, and can sometimes help you document what the “page’s” objective might be.

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Not sure what you are asking about images. Folks would need to to see the CSS to help, and you might want to mention the theme and developer.


(Judy Kennedy) #3

I had no idea. What do search engines use now primarily? The theme is Capture by Michael David. Here is what my CSS code looks like on that page. The image that does not appear responsive on ISO devices is “mightpen” on the aside panel. Here is the code:
#feature {background-image: url(%resource(beyondtherainbow.jpg)%);}
#feature1 {background-image: url(%resource(maleficentgreen.jpg)%);}
#feature2 {background-image: url(%resource(dottotofeet.jpg)%);}
#feature3 {background-image: url(%resource(dragonwolf.jpg)%);}
#feature4 {background-image: url(%resource(libertysunset.jpg)%);}
#feature5 {background-image: url(%resource(beyondtherainbow.jpg)%);}

section #padding {background-image: url(%resource(justclouds.jpg)%);}
section #padding {background-image: url(%resource(justclouds.jpg)%);}
aside {background-image: url(%resource(mightypen.jpg)%);}
section #padding {padding-bottom: 120px;}
#sidecontent {background-color: rgba(255, 255, 255, .80)!important;
margin-bottom: 100px;
margin-top: 100px;
width: 75%;
margin-left: auto;
margin-right: auto;
padding: 50px;
outline: solid rgba(255, 255, 255, .55) 1px;
outline-offset: 20px;
font-size: 30px; }


(Doug Bennett) #4

They read the text on your pages.
Text in headlines (h1 - h6, h1 highest) will rank higher than text in paragraphs. Text in alternate descriptions (alt tags) of images will also be read. Text close to the top of a page can have more influence as well.
There’s a ton of posts about SEO (search engine optimization), both here and on the Internet.

As for the code above I’m not at a Mac right now but will have a a look later if no one else helps out before.


(Doug Bennett) #5

You are going to have to be more specific. I see no <aside> with anything in them.

Give a link to the page with the problem, and a screenshot of the image you are having issues with.


(Judy Kennedy) #6

http://www.judykennedy.com/law/thegift/ is the link. Here is a screenshot of the image as it appears on a desktop correctly:

When you bring it up on an ios device you cannot even see the hand or if so just a portion of it. The CSS code above is a correct depiction as is: aside {background-image: url(%resource(mightypen.jpg)%);} There is no aside in brackets. It just appears under the first two lines about section. The jpg for the image is “mightpen” as can be seen in the code. I hope this helps.
Judy


(Doug Bennett) #7

Try adding this to your CSS:
aside {
background-position: center top;
}


(Judy Kennedy) #8

It worked! You’re a genius! Now I’m going to go add it to my other “asides”. Thanks so much Doug!

Judy