Blog Post Question

Hello Support,

I figured it out but just wanted to check with you guys if the code I put in is right.

/* HOME ANIMATED NUMBERS LAYOUT */
.number_prepared .avia-animated-number-title{float: left !important;}

.avia-animated-number-content{float: left !important; margin-left: 15px !important; line-height: 19px !important; width: 150px !important; height: 40px !important; text-align: left !important;}

/* HOME ANIMATED NUMBERS */
.avia-animated-number-title {
font-family: ‘Roboto’, sans-serif !important;
font-weight:100 !important;
}

.avia-animated-number-content {
font-family: ‘Roboto’, sans-serif !important;
font-weight:100 !important;
line-height: 1.1em !important;
height:0% !important;
margin-top: 6px !important;
}

/* BLOG POST LAYOUT */
#top .fullsize .template-blog .blog-meta {
display: block;
float: left;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
z-index: 1000;
}

.entry-content-wrapper.clearfix.standard-content {
float: right;
}

/* BLOG POST TITLE ALIGN LEFT */
#top .fullsize .template-blog .post-title {
text-align: left;
}

/* BLOG POST DATE INFO ALIGN LEFT */
#top .fullsize .template-blog .post-meta-infos {
text-align: left;
}

/* BLOG POST IMAGE SIZE */
.small-preview, #top .fullsize .template-blog .blog-meta {
width: 140px;
height: 100%;
}

/* BLOG POST IMAGE */
.small-preview {
border-radius: 100% !important;
}

/* IPAD PORTRAIT & LANDSCAPE – BLOG POST LAYOUT */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* BLOG POST LAYOUT */
#top .fullsize .template-blog .blog-meta {
display: block;
float: left;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: left;
z-index: 1000;
}

.entry-content-wrapper.clearfix.standard-content {
float: right;
width:70%;
text-align: left;
}

p {
margin: 0.85em 0;
text-align: left;
}
}

/* IPHONE 4S PORTRAIT & LANDSCAPE – BLOG POST LAYOUT */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* BLOG POST LAYOUT */
#top .fullsize .template-blog .blog-meta {
display: block;
float: left;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
z-index: 1000;
}

.entry-content-wrapper.clearfix.standard-content {
float: right;
width:70%;
}

p {
margin: 0.85em 0;
text-align: left;
}

/* BLOG POST IMAGE SIZE */
.small-preview, #top .fullsize .template-blog .blog-meta {
width: 80px;
height: 100%;
}
}

Thanks,
MP

• This reply was modified 9 years, 10 months ago by Kevin.

Hello Elliott,

Yea so it works fine on ipad in portrait/landscape fine and on the browser full screen but once you begin making the browser a little small it doesn’t size properly and looks messy… let me know what I can do to fix it.

looks good as you can see here:

When resized it looks all messy:

Thanks,
MP

Thanks the issue is fixed Eliott… thanks again.