lisa
(@contentiskey)
i think the CSS might need to be altered in some areas.
do you notice any media queries in your style.css file? (media queries help manage for different screen size displays)
Ok thank you. This is the css I have for media. What do you think?
/* =Media
----------------------------------------------- */
.site-header img,
.entry-content img,
.comment-content img,
.widget img {
max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
.site-header img,
.entry-content img,
img.size-full {
max-width: 100%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
.wp-caption {
border: 1px solid #ccc;
max-width: 100%;
}
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright {
margin-bottom: 1.5em;
}
.wp-caption img {
display: block;
margin: 1.2% auto 0;
max-width: 98%;
}
.wp-caption-text {
text-align: center;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.site-content .gallery {
margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-content .gallery a img {
border: none;
height: auto;
max-width: 90%;
}
.site-content .gallery dd {
margin: 0;
}
.site-content .gallery-columns-4 .gallery-item {
}
.site-content .gallery-columns-4 .gallery-item img {
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
Thank you for your time.
Megan
lisa
(@contentiskey)
not exactly what I was thinking of
something more like this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
NOTE: not all themes are controlled with media queries but I thought it might be a good place to start.
which area of your website is the biggest concern for you on mobile?
header, content area, footer etc…..
Ok – Unfortunately, I do not have any code like such on my site. That may work because half my content gets cut off on my other three pages on mobile devices.
I guess my header is the most important. Does that make a difference in the way I write this?
I apologize, I do not really understand how to do this or how to get started, so any help would be greatly appreciated.
lisa
(@contentiskey)
do you have a child theme installed?
did you purchase the theme?
I do not. I made the theme from scratch. I did add a custom css plugin because I wanted to experiment with something, but that is it.
lisa
(@contentiskey)
if you were able to build a theme completely from scratch, i would recommend testing out adding some media queries to help control the display in various sized devices. you know the theme best if you built it.
I built it through
http://themeshaper.com/2009/06/22/wordpress-themes-templates-tutorial/
which is great, but I can’t figure out how to make it work mobily.
lisa
(@contentiskey)
i can recommend a few resources that you might want to look into for getting comfortable with making your website responsive/flexible:
http://responsivedesignweekly.com/
http://ethanmarcotte.com/
http://wpnyc.org/
http://www.abookapart.com/products/responsive-web-design
