Make blog posts summary display as single item on mobile - Support

http://dev2.electrixinternational.com/about-electrix/videos/

At present, blog posts appear side by side on mobile devices which makes them very small.

How can I arrange them so they are only single column on a mobile?

October 15, 2015 at 5:40 pm #519446

Hey richardelectrix!

Add this to your custom CSS.

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry {
    width: 100% !important;
    margin-left: 0px !important;
}
}

Best regards,
Elliott

This reply was modified 9 years, 1 month ago by Elliott.

October 15, 2015 at 5:43 pm #519449

http://dev2.electrixinternational.com/about-electrix/videos/

Thats doesnt appear to have worked.

October 15, 2015 at 7:32 pm #519511

Hi!

Try it now.

Regards,
Elliott

October 15, 2015 at 7:54 pm #519527

It’s still the same I’m afraid.

October 16, 2015 at 7:09 pm #520249

Hi!

Your probably have a typo in your custom CSS then. Paste all of it here.

Cheers!
Elliott

October 19, 2015 at 10:50 am #520805

The whole of my css is in private …

The bit relevant to the mobile blog posts …

/* Attempt to make blog posts single column on mobile */
@media only screen and (max-width: 767px) .responsive #top #wrap_all .slide-entry {
    width: 100% !important;
    margin-left: 0px !important;
}

On the enfold site they are single column on a mobile as standard?

October 19, 2015 at 7:53 pm #521159

Hey!

That’s quite a lot of CSS. Make sure there are no typos. I looked over it real quick and found this.

td.how-to-order-1st-column span.av-icon-char{
/* display: none; */
/* visibility: hidden; */
color=’#007ab6′
size=’60px’
position=’absolute’
top: 60px;
}

Which is going to cause problems. Make sure that every opening bracket has a closing bracket and that all of your comments are properly closed. Those are the most common CSS typos.

Regards,
Elliott

October 20, 2015 at 10:08 am #521457

http://dev2.electrixinternational.com/products/trunking-systems/flat-lid-trunking-system/

Thanks

I have looked over the CSS and cant see anything else obvious.

The blogs are now displaying as a single column.

However I can’t figure out why this isnt working

/* CT START Tick Box List */

ul.list  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E822";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Tick Box List */

/* CT START Lock Symbol List */

ul.list-lock {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-lock li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-lock li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E839";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Lock Symbol List */

/* CT START Phone Symbol List */

ul.list-phone  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-phone li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E854";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Phone Symbol List */

/* CT START Email Symbol List */

ul.list-email {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-email li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E805";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Email Symbol List */

/* CT START Fax Symbol List */

ul.list-fax {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-fax li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-fax li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E886";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Fax Symbol List */

This (ul list) is meant to display the fontello tick box as a bullet.

But instead it is just displaying 822.

October 20, 2015 at 12:36 pm #521551

http://dev2.electrixinternational.com/about-electrix/blog/

I have fixed the above.

Back to the blog posts on mobile.

It is working as a single column but ther is a large gap between every other blog post (correct) and the rest are touching each other.

INCORRECT – http://screencast.com/t/eEqn9XzuJjK

CORRECT – http://screencast.com/t/3yWm855PWM

October 21, 2015 at 7:59 pm #522477

Andy

Hi!

use this code to control it’s margin:

@media only screen and (max-width: 736px) {
article.slide-entry.flex_column.post-entry.slide-parity-odd.av_one_half.first.real-thumbnail {
margin-bottom: 20px !important;
}}

and adjust as needed.

Best regards,
Andy

This reply was modified 9 years ago by Andy.

November 9, 2015 at 3:44 pm #532664