Independent Source Code

The source code is very independent of the layout and flex box basically helps a designer know when to center elements, expanding and contracting elements in order for them to fit in spaces that are available. Flex box was at first used with Mozilla in laying out elements especially in the toolbar.

This code has further been developed and can now serve a number of all the leading browsers in the market today.

The Syntax Varies Depending On The Browser

The syntax is relatively different between the different leading browsers like Firefox, Google Chrome and Safari. Firefox still uses the older syntax, as well as Safari, but this is not the same for Google Chrome. Just like the name suggest, CSS flex box is very flexible and has a number of possibilities to exploit.

This is one of the latest trends in web design and internet marketing that allows developers to take advantage of this code in very many ways. With having a stable syntax, all the available browsers are now supporting CSS flex box and many web designers are using this code to developing the framework of their websites.

Browsers Are Updating To New Responsive Design Technology

Whereas Firefox and Internet Explorer browsers seem to be updating to adapt to the new technology, there is no sign that Safari browser will also follow that trend. However, sooner or later Safari will have to or this browser will become to outdated to use. Currently, Safari is the main platform browser for Mac and developers are using tables in mapping different syntax to use flex box and taking in account that.

Flex Box Allows Easy Web Designing

Flex box is really making Web Designing easier, especially with the hassle that developers faced before with CSS. Designing web layouts were extremely tedious to work out during design with developers first using tabled based ones then shifting to float based ones. By switching to responsive design, web designers are able to design for multiple browsers and screen resolutions.

Internet Explorer 10 Supports The Grid Based Layout

Internet Explorer 10 is a front liner already supporting the grid based layout. The grid layout specification is awesome when it comes to designing layouts for websites and a total game changer when it comes to Internet Marketing.

With flex box changing the ease of design and layout, soon it will be a very robust tool. It will have very many more options that developers and designers can explore. It is one tool that every designer and developer must follow closely if they want an easier way of making their websites look even better to their visitors and help in Internet Marketing.

The post CSS Flex Box Is As Easy As CSS Pie appeared first on Ideas and Pixels.

To encompass the budget cuts we have to build these sites using pre-built themes. Using themes allow us to build websites at an effective rate and then we are able to customize them!

One of the issues I was having with the Bazar Theme were the extra 6 post types that our client did not need. They wanted them removed because it was cluttering up the sidebar.

Please note if you use this trick to hide the fact that you are using a theme, that’s fine. Please, never put a purchased template into your portfolio and say you built the site! Don’t become another one of these statistics. Thanks!

So How Do I Remove The Post Types From A WordPress Purchased Theme?

Here is how I removed the pre-built post types using this code within the functions.php file.

Open up the themes fuctions.php and add the following code.

function hide_menu_items() {
remove_menu_page( 'edit.php?post_type=your-post-type-link' );
}
add_action( 'admin_menu', 'hide_menu_items' );

Keep in mind you can copy and paste this code as many times as needed to target multiple Default WordPress Theme Post Types you wish to remove:remove_menu_page( 'edit.php?post_type=your-post-type-link' );

Open up the backend of your WordPress theme and hover over the Post Type you want to remove. If you are using Google Chrome it will display the post types link at the bottom of the page.

Using Chrome you can right click the Post Type > Copy link address and paste it into remove_menu_page( 'edit.php?post_type=your-post-type-link' );

The great thing about this code is the fact that we actually did not remove the default theme Post Types. We only have these hidden and they can easily be switched back on! If you need one of them again all you have to do is remove the code from the function.php file. The Post Type will appear right where it was originally within the sidebar.

Hope this helps and if you have any other solutions, please comment below!

The post How To Remove A Themes Post Type With A WordPress Template appeared first on Ideas and Pixels.

The way that the documentation explains it, row-fluid is made for fluid websites, but that’s not exactly true. What matters is that you are calling the responsive stylesheet. That’s what makes your design actually respond fluidly. But there is one big difference between using row and row-fluid that isn’t readily explained.

How And When To Use Twitter Bootstrap Row-Fluid And Row

If you dig into the code, you can see the one easy-to-find difference. Row-fluid uses percentage-based calculations on its child spans’ width. Row simply uses pixel-based calculations. So what’s the difference? Well both will still tile down the page, adjusting to the width of the browser as it shrinks or grows. But row-fluid will continuously try to resize, while row will shift down only after a certain width is reached.

My Personal Tip When Designing Responsive Sites

The most important thing to remember when designing a responsive website is to always keep the grid system underlying it in mind. Before any design, you should sketch out your grid layout first! It’s very similar to wireframing. Afterward, create a design and layer it on top. This guarantees a good underlying structure based on design principle.

For more information and examples, visit the Twitter Bootstrap website. Have fun!

We would love to see some of your own responsive design. Show us what you’ve done in the comments below!

The post Twitter Bootstrap Row-Fluid and Row appeared first on Ideas and Pixels.

.video-container { position: relative; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 56.25%;
padding-top: 30px; }

Then, simply wrap any videos that you want to be resized in the “video-container” class. It’s that easy.

Until next time!

The post CSS Fluid Video Iframes And Embeds Quick Fix appeared first on Ideas and Pixels.

While coding our new website layout, I ran into a problem that I had somehow always avoided before. Using the Phark Image Replacement method for creating simulated “alt” text for non-images (like a logo or header), I was unable to get the text in my element to disappear like normal.

Here’s the normal way of using image replacement:
a#logo { text-indent: -9999%;
background: url(images/some-image.png) no-repeat top left;
width: 100px; height: 50px; }

Finally, it dawned on me: I had a text-align: right also in this style that was messing it all up. So what’s the final takeaway from this post?

Negative text indents do not work when accompanied by a right text-align.

The post CSS Tip: Negative Text Indent Not Working appeared first on Ideas and Pixels.