Support Has Moved!

Please post all new questions on the new support system

Before posting a discussion topic, be sure to check out our Forum Rules and Support Policy.

Get design feedback and approval with our newest WordPress plugin, ProjectHuddle. Check it out →

Latest Struck Version is 1.06

Latest GridStack Version is 1.1

Latest Edition Version is 1.6

Latest District Version is 1.2.6

Latest ExtraNews Version is 1.4.9

Latest Aware Version is 1.4

Latest BigFormat Version is 1.4

Latest Bookcase Version is 1.54

Latest Ellipsis Version is 1.5

four columns etc

mtesfamichael's Avatar

mtesfamichael

20 Aug, 2015 12:47 AM

Hi,

In the footer and anywhere else that uses "four columns" class I only needed to use 3 columns so I changed the width of the 4 columns class to 300px and removed one four columns. Now my page doesn't seem to respond. is there a 3 columns that i should be using that is evenly distributed for the 960px wdith?

1. I tried using one_third http://themewich.com/district/column-shortcodes/ however, it doesn't respond well, the columns get squeezed before it breaks to single column. it will be better if it breaks to two, then single?

2. I am using images for the one_third columns and it really get squeezed when screen width is changing?
also i moved my menu to the left of the container and again not responding well?

3. Adding text to slideshow in pages
I followed what is here, however, my image caption doesn't show? http://pastebin.com/raw.php?i=T4mmrWv8

thanks.

  1. 1 Posted by Eric Schmidt on 20 Aug, 2015 05:26 PM

    Eric Schmidt's Avatar

    Hi,

    I'm not exactly sure what you're trying to accomplish by changing the four columns width? Do you have a live URL example of that? May be easier to adjust the column class in the theme templates instead of changing the CSS.

    Regarding the shortcode, it stays at 3 columns until 767px, then shifts to 1 column. You can make this medium screen size use 2 columns instead by adding some custom css to the theme options...

    @media all and (min-width: 768px) and (max-width: 960px) {
    .one_third {
        width: 46%;
    }
    }
    

    For the slider captions, it is setup to use the Caption field on that image you have in the slideshow. Not sure why that wouldn't be working, do you have a live URL with a slider I can see?

    Eric

  2. 2 Posted by mtesfamichael on 20 Aug, 2015 06:49 PM

    mtesfamichael's Avatar

    Hi, for the slider caption, i added the slider through wordpress media and then i added the caption and the description. none of them appeared.

    i also changed the layout of the top-nav to appear at where the current logo appears here: http://themewich.com/district/

    however, when the browser resizes it doesn't respond. i do have a longer top-nav titles, it leaves white spaces on the right side of the browser. override-x didn't do it, and it looks like the mobile menu doesn't kick in either?
    any ideas. thanks

  3. Support Staff 3 Posted by Andre Gagnon on 21 Aug, 2015 02:43 PM

    Andre Gagnon's Avatar

    Hi mtesfamichael,

    Do you have a live version link to your site? It's hard to help you troubleshoot the issue without seeing it.

    Thanks!

    Andre

  4. 4 Posted by mtesfamichael on 22 Aug, 2015 02:52 PM

    mtesfamichael's Avatar

    Hi,
    see the attached image. on some media screen such as ipad, etc the navigation doesn't show the mobile menu, however, the navigation gets cut

    also as you can see from my image, the caption didn't appear. is there another slider that you would recommend to allow for caption?

    the code that appears here, is it in your new updated theme: http://pastebin.com/raw.php?i=T4mmrWv8

  5. Support Staff 5 Posted by Andre Gagnon on 22 Aug, 2015 04:36 PM

    Andre Gagnon's Avatar

    Hi mtesfamichael,

    I can't really be sure without looking at your site live, but I think the navigation issue is because of the amount of navigation items on your site. You'll want to show the mobile navigation menu for the ipad size in this case. Try adding this to your custom css box in Theme Options > Customize:

    @media only screen and (max-width: 1199px) and (min-width: 992px ) {
        .mobile-link {
            display: inline-block;
        }
        div#logo {
             position: relative;
             width: 95%;
        }
        #menu, .searchnav {
            display:none;
        }
    }
    

    I think that's what you're referring to, but again, if you have a live version link to your site this would make it a lot easier to troubleshoot.

    Andre

  6. 6 Posted by mtesfamichael on 22 Aug, 2015 10:48 PM

    mtesfamichael's Avatar

    - Thanks Andre. I tried it and the mobile menu didn't appear. the break points i am working with is 768px to 840px. mobile link appears for anything below 767. the problem is when it is 768px to 840px the menu gets cut and mobile link doesn't appear.

    - lastly, I mentioned that the slider doesn't show the caption, can you recommend a plugin that works best with your theme? or is your theme come already updated with this code?:
    http://pastebin.com/raw.php?i=T4mmrWv8

  7. Support Staff 7 Posted by Andre Gagnon on 23 Aug, 2015 07:25 PM

    Andre Gagnon's Avatar

    Hi mtesfamichael,

    Yes, that's the current version of the code shipped with the theme. What version are you using? Captions should work if they're set in the image attachment.

    Andre

  8. 8 Posted by mtesfamichael on 23 Aug, 2015 07:27 PM

    mtesfamichael's Avatar

    I have the most latest version as i purchased your theme on aug 5, 2015. thanks. i am also running the earliest version of wordpress. can you recommend a slider if this one doesn't work? thanks.

    Thanks Andre. I tried it and the mobile menu didn't appear. the break points i am working with is 768px to 840px. mobile link appears for anything below 767. the problem is when it is 768px to 840px the menu gets cut and mobile link doesn't appear.

  9. 9 Posted by mtesfamichael on 23 Aug, 2015 07:38 PM

    mtesfamichael's Avatar

    here is my link.
    test it on chrome using inspect for the break points

    also you can see the caption for the slider image not working.

    lastly, i am using section below the slider with a background image, and that is also not responsive. It looks like most of the images are not responsive.

    i am using a child-theme so you can get the css.

    thanks.

  10. 10 Posted by Eric Schmidt on 24 Aug, 2015 03:04 PM

    Eric Schmidt's Avatar

    Hi,

    Try using this to trigger the mobile menu to display at 840px...

    @media only screen and (max-width: 849px) {
    #menu {
        display: none;
    }
    .mobilenavcontainer, .mobilebutton {
        display: block;
    }
    }
    

    Regarding the slider, the full width slider is not setup to pull in the caption. The code you provided is for the slider shortcode. You can see an example of that on this page...

    http://themewich.com/district/shortcodes/

    If you want to add additional content to the full width slider, you can try the method described here...

    http://support.themewich.com/discussions/district-wordpress-theme/6...

    Eric

  11. 11 Posted by mtesfamichael on 24 Aug, 2015 03:25 PM

    mtesfamichael's Avatar

    please see below as I wasn't able to attach an image to this.

  12. 12 Posted by mtesfamichael on 25 Aug, 2015 01:16 AM

    mtesfamichael's Avatar

    Hi Eric,

    Thanks for your response it worked, now i am going to style it:) I must say your fast response is fantastic. your theme came highly recommended by someone who has purchased it and used it more than 10 times. amazing!!

    Lastly, I find the bg image in my section doesn't respond well. the text doesn't respond well either. some of the images or columns don't respond well. the text on the slider doesn't respond either. The entire site appears to be cut at breakpoints 775px and on nexus 9 vertical layout? see the attached image. there is a big white space to the right of screen and site is cut at "search"

  13. 13 Posted by Eric Schmidt on 25 Aug, 2015 03:20 PM

    Eric Schmidt's Avatar

    Hi,

    It looks like you've added some custom css to set the width on a div...

    .home .top-nav .container_row {
    width: 960px;
    margin: 0 auto;
    }
    

    Since this width is fixed at 960px, it's not responsive, creating that extra white space. Not sure exactly what the purpose of that CSS was, but you'd either need to remove that width, or use some media queries to resize that down for different screen sizes.

    It also looks like you've added some extra padding to the 'container' class...

    .container {
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        /* width: 960px; */
        margin-right: auto;
    }
    

    This would also add extra white space around your content. You may want to remove that padding, or set the box-sizing on that so the padding is included when calculating the width...

    .container {
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        /* width: 960px; */
        margin-right: auto;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    

    Eric

  14. 14 Posted by mtesfamichael on 25 Aug, 2015 03:37 PM

    mtesfamichael's Avatar

    Fantastic Eric, everything works like a charm:-)

  15. Eric Schmidt closed this discussion on 25 Aug, 2015 04:03 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac