Docs

[appsrex]

Hi, I’m using x( I use x for almost all of clients) for another client Painting website. We are using Portfolio post type to show client’s paintings. But the worse thing is Featured image is taking the whole page which is odd. Can you guys suggest me how I can keep the picture small and proportioned for all the devices? Here is my staging site link http://staging.apprex.net/hart/music-paintings/

Also, navigation on my 13″ MacBook Pro retina overlaps breadcrumbs & title, so I’m attaching a screenshot to understand the problem.

Thanks

[Christian]

Hey there,

The Featured Image displays fine on my end. Can you give us a screenshot of what’s showing on your end?

Your screenshot does not show the featured image problem but your menu falls below the logo. This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

Thanks.

[appsrex]

If you go to the link I provided and click on any post you will be seeing, featured image is taking the whole width & height of the window. They are too big!! bigger than what normal featured image should be. Adding a image as well.

[Rue Nel]

Hello There,

Thanks for the updates!

1] To prevent the featured image from being fullwidth and display the full size featured image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .entry-thumb {
    text-align: center;
}

.site .entry-thumb img {
    min-width: 10%;
    margin: 0 auto;
}

2] On desktop screens such as the Macbook 13 inch, your menu will have more height because there isn’t enough width for the logo plug the menu items. I would suggest that you break down your menu into a few parent menu items and use sub menu so that there is enough width for both the menu and logo.

Hope this make sense. Please let us know how it goes.

[appsrex]

Ok that solves somehow for long height images but how about images that cover almost whole window ( Landscape images?

[Christopher]

Hi there,

Please provide us with some screen shots.

You can adjust image size by adding following code :

.single-post .entry-featured {
    width: 50%;
    margin-right:auto;
    margin-left:auto;
}

Hope it helps.

[Author]

Posts