image size in responsive mode

[adampreuss]

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

[Harry]

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

[adampreuss]

Thanks, Harry. CSS works!

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

[Harry]

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

[adampreuss]

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?

[Harry]

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

[adampreuss]

looks not bad;)

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

[Harry]

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

[adampreuss]

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

[Harry]

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

[adampreuss]

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;}

[Harry]

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

[adampreuss]

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

[Harry]

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

[Author]

Posts