Home Forums Themes Support Gecko image size in responsive mode

This topic contains 13 replies, has 2 voices, and was last updated by  Harry 8 months, 1 week ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #15048

    Hi,

    first of all, thanks for all the help during my setup which is now going into final tuning. You are doing a really good service!

    two questions regarding responsive on iphone:

    1. the images of slider are only good downsized when the phone is in horizontal, but not in normal vertical view. is it possible to size them more down that they will be also in “normal” smartphone view good sized vissible?
    2. the menu below the logo on main header: menu points are visible on normal browser, but not on smartphone. is this possible to activate?

    thanks

    Adam

    #15053

    Hi Adam,

    1. I check you site, if you reduce height of the image it can’t cover the text, you have to trim the text on slider.

    Please check with custom CSS code

    @media only screen and (max-width: 480px) {
    .metaslider .slides img {height: 200px !important;}
    .metaslider .flexslider .caption-wrap h4 font {font-size: 11px;}
    }

    2. On mobile when you click on hamburger menu

    The menu will display like this

    If you want show menu like desktop it look like

    It display not good.

     

     

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #15064

    Thanks, Harry. CSS works!

    Regarding the menu I mean the allways visible menu points below the logo, the menu line.
    Please see my screenshot:

    menu

    #15068

    Yes, but on small screen it can’t display in a line like on desktop because the screen reduce but the length of menu still keep. I try to reduce font size of menu title and between menu title but it still break to second line.

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #15485

    Sorry for warming this up again, but I really would like to see the menu line below the logo. At least on tablet/iPad.

    do I understand you right that it’s principal possible? Maybe if I reduce menu with one item to get the whole line on screen? Or to make to lines menu in mobile/responsive mode?

    #15492

    Hi Adam,

    Please add below code to show menu on tablet, ipad

    @media only screen and (max-width: 1024px) {
    .jas-navigation.hidden-sm { display: block;}
    }
    
    @media only screen and (max-width: 568px) {
    .jas-navigation.hidden-sm { display: none;}
    }

    if you want show menu on both tablet and mobile please use below code

    @media only screen and (max-width: 1024px) {
    .jas-navigation.hidden-sm { display: block;}
    }
    
    @media only screen and (max-width: 568px) {
    .jas-menu > li:not(:first-child) {margin-left: 10px;}
    .jas-menu li {font-size: 8px;}
    }

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #15516

    looks not bad;)

    on ipad its left side orientated (not in the center). is there any code to center it?

    #15523

    Hi,

    Please change prev code to

    @media only screen and (max-width: 1024px) {
    .jas-navigation.hidden-sm { display: inline-block;}
    }
    
    @media only screen and (max-width: 568px) {
    .jas-menu > li:not(:first-child) {margin-left: 10px;}
    .jas-menu li {font-size: 8px;}
    }

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #15803

    Happy new year harry!

    I have one issue left with this topic:

    on smartphone(iphone safari) the menu now also looks good. but when the screen is turned to horizontal then the menu line gets bigger and shows two lines.
    Do you have a CSS code for me to fix this?
    Thanks in advance.

     

    Adam

    #15808

    Hi Adam,

    Please change prev code to

    @media only screen and (max-width: 1024px) {
    .jas-navigation.hidden-sm { display: inline-block;}
    }
    @media only screen and (max-width: 812px) {
    .jas-menu > li:not(:first-child) {margin-left: 25px;}
    .jas-menu li {font-size: 12px;}
    }
    
    @media only screen and (max-width: 736px) {
    .jas-menu > li:not(:first-child) {margin-left: 15px;}
    .jas-menu li {font-size: 11px;}
    }
    
    @media only screen and (max-width: 480px) {
    .jas-menu > li:not(:first-child) {margin-left: 10px;}
    .jas-menu li {font-size: 8px;}
    }
    
    @media only screen and (max-width: 360px) {
    .jas-menu > li:not(:first-child) {margin-left: 8px;}
    .jas-menu li {font-size: 8px;}
    }

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #15821

    great, works.

    But what still not looks good is the slider text in rotated horizont mode.

    in normal mode you css brought it to correct size.

    which css I have to use for good text in horizontal view?

    here is my whole actual css coding in theme settings:

    .header-5 .jas-branding {

    padding: 0;

    }

    @media only screen and (max-width: 1024px) {

    .jas-navigation.hidden-sm { display: inline-block;}

    }

    @media only screen and (max-width: 812px) {

    .jas-menu > li:not(:first-child) {margin-left: 25px;}

    .jas-menu li {font-size: 12px;}

    }

    @media only screen and (max-width: 736px) {

    .jas-menu > li:not(:first-child) {margin-left: 15px;}

    .jas-menu li {font-size: 11px;}

    }

    @media only screen and (max-width: 480px) {

    .jas-menu > li:not(:first-child) {margin-left: 10px;}

    .jas-menu li {font-size: 8px;}

    }

    @media only screen and (max-width: 360px) {

    .jas-menu > li:not(:first-child) {margin-left: 8px;}

    .jas-menu li {font-size: 8px;}

    }

    .blog .page-head { margin-bottom: 60px;}

    .metaslider .flexslider .flex-direction-nav li a.flex-prev,

    .metaslider .flexslider .flex-direction-nav li a.flex-next {

    outline: none;

    padding: 0;

    overflow: hidden;

    top: 50%;

    margin-top: -23px;

    width: 40px;

    height: 40px;

    z-index: 8;

    background: #b59677;

    background-image: none;

    border: 1px solid #fff;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    text-shadow: none;

    }

    .metaslider .flexslider:hover .flex-direction-nav li a.flex-next {

    right: 30px;

    }

    .metaslider .flexslider:hover .flex-direction-nav li a.flex-prev {

    left: 30px;

    }

    .metaslider .flexslider .flex-prev:hover,

    .metaslider .flexslider .flex-next:hover {

    opacity: 1;

    }

    .flex-direction-nav .flex-prev:before,

    .flex-direction-nav .flex-next:before {

    font-family: ‘Pe-icon-7-stroke’;

    font-size: 36px;

    color: #fff;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-indent: 0;

    display: block;

    line-height: 36px;

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    }

    .metaslider .flexslider .flex-direction-nav li .flex-prev {

    left: 30px;

    }

    [dir=’rtl’] .metaslider .flexslider .flex-direction-nav li .flex-prev {

    right: 30px;

    left: auto;

    }

    .metaslider .flexslider .flex-direction-nav li .flex-prev:before {

    content: ‘\e686′ !important;

    }

    [dir=’rtl’] .metaslider .flexslider .flex-direction-nav li .flex-prev:before {

    content: ‘\e684′ !important;

    }

    .metaslider .flexslider .flex-direction-nav li .flex-next {

    right: 30px;

    }

    [dir=’rtl’] .metaslider .flexslider .flex-direction-nav li .flex-next {

    right: auto;

    left: 30px;

    }

    .metaslider .flexslider .flex-direction-nav li .flex-next:before {

    content: ‘\e684′ !important;

    }

    [dir=’rtl’] .metaslider .flexslider .flex-direction-nav li .flex-next:before {

    content: ‘\e686’ !important;

    }

    .jas-mini-cart .woocommerce-mini-cart__buttons img {max-width: 300px; margin-top: 10px;}

    .wc-proceed-to-checkout a {font-size: 14px;text-align: center;display: block;}

    .wc-proceed-to-checkout .wcppec-checkout-buttons__separator {margin: 0;}

    @media only screen and (max-width: 736px) {

    .vc_row.vc_custom_1513989788010 { padding-top: 50px !important; padding-bottom: 50px !important; }

    .vc_row.vc_custom_1513989788010 h2..fs__50 { font-size: 20px;}

    }

    @media only screen and (max-width: 480px) {

    .metaslider .slides img {height: 200px !important;}

    .metaslider .flexslider .caption-wrap h4 font {font-size: 11px;}

    }

    .post-info .post-author, .post-info .post-time {display: none;}

    .post-meta, .posted-on { display: none;}

    .single-post .entry-date, .single-post .entry-date + .pr {display: none;}

    #15826

    Hi Adam,

    Please add more code

    @media only screen and (max-width: 736px) {
    .metaslider .flexslider .caption-wrap h4 font {font-size: 13px;}
    }

    @media only screen and (max-width: 640px) {
    .metaslider .flexslider .caption-wrap h4 font {font-size: 12px;}
    }

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #16010

    It all looks good. Unless the text within slider when smartphones is in horizontal view.

    I know it’s much text. But kn the smaller veetical view text fits well. So should also fit in horizontal

    #16020

    Hi,

    Please add more css

    @media only screen and (max-width: 736px) {
    .metaslider .flexslider .caption-wrap .caption {
    width: 90%;
    }}

    @media only screen and (max-width: 360px) {
    .metaslider .flexslider .caption-wrap h3 {
    font-size: 11px;
    }}

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.