-
Posts
-
Hi,
Yigit gave me a code snippet to get the logo and header phone info. to move left in the boxed version of the theme. It was/*this is css to get the main menu to align left*/
div#header_main_alternate .container { width: 100%; margin: 0; }
.html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a { padding-right: 13px; }@media only screen and (min-width: 1140px) {
div#header_meta .container, div#header_main .container { margin: 0 5px; width: 1120px; }}/*this is css for the phone no. at the top of the page above logo to centre and display below the social media icons on mobile phones*/
.phone-info { font-size: 18px; !important; font-weight: normal!important; }
.phone-info span {
padding: 0px 0px;
margin: 0px 0px 0px 0px;
display: inline-block;
}Problem is that the code is not applying to portrait view on a tablet (Samsung Galaxy Tab3 10 inch)
Also the homepage body, portrait view on a tablet (Samsung Galaxy Tab3 10 inch) and on smartphone (Samsung Galaxy S3).
The Columns from “Key Cutting” down are not centring the images or displaying them full size.
The images are the same size as the ones preceding them on the easy sliders which are displaying full size and centred.Any help appreciated.
Thanks
Hi GOWD!
Thank you for using Enfold.
You can decrease the font size of the phone info on mobile devices:
@media only screen and (max-width: 989px) and (min-width: 768px) { .phone-info { font-size: 13px; } }Go to Enfold > Header > Mobile Menu panel. Choose the second option on Header Mobile Menu activation to show the mobile menu earlier.
Cheers!
IsmaelHi Ismael,
thanks for your reply.While the reduced text size has gotten the phone info. on the same line as the icons the css does not address the request to have
logo and header phone info. to move left in the boxed version of the theme in portrait view on a tablet.Also any solution to the other issue;
The Columns from “Key Cutting” down are not centring the images or displaying them full size.
The images are the same size as the ones preceding them on the easy sliders which are displaying full size and centred.Hey!
The code only applies to screen larger than 1140 because of the media query:
@media only screen and (min-width: 1140px) {If you wanted it to apply always then you could delete the media query and use the css alone.
The images that aren’t filling up the containers are not big enough to do that and so they are not being stretched.
Best regards,
DevinHi, all 10 images on the Homepage are 211px x 259px including the easy slider “before” and “after” ones.
The easy sliders are filling up the space available in Tablet Portrait view, the images are not.
I changed the Key Cutting and Shoe Stretching images from Images to Easy Sliders to see what would happen.
They immediately filled up the available space.
Have they been stretched by the Easy Slider whereas the Image module does not stretch?What width does an image need to be to fill up the space in portrait view on a 10″ Tablet, 4 rows Landscape, 2 rows Portrait?
Hi!
Looks like you didn’t set the Image Alignment of the Image elements starting from “Shoe Stretching”. Edit the element then set the alignment to “Center”.
Best regards,
IsmaelHi.
I have centred all the images.
I resized them all to 330px x 405
It all worked for about 5 minutes.
Then the four images on the bottom row are now a complete mess on Tablet Portrait view, fine on every other screen.Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 989px) and (min-width: 767px) { div .av_one_fourth { width: 48%; }}Cheers!
Yigit
- The topic ‘Responsive issues on Tablet Portrait view’ is closed to new replies.