Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 22, 2014 at 2:21 am #294114
    CloudChoice

    HI,

    I would like to keep the position of these elements independent of the device used (computer, mobile phone or tablet)

    Social bookmarks: Left Side.
    Secondary menu: Rigth Side.

    Which CSS can I use to do that?

    THANKS

    July 22, 2014 at 4:19 am #294141
    Josue

    Hey!

    Try with this:

    .sub_menu {
    float: right !important;
    width: auto !important;
    position: relative !important;
}
.social_bookmarks{
   width: auto !important;
   display: block !important;
}

    Cheers! 
    Josue

    July 22, 2014 at 10:11 pm #294597
    CloudChoice

    HI,

    THANKS, worked but I have a small problem in the fine tune.

    When I use this code, work in COMPUTER, but misalignment in IPAD

    @media only screen and (max-width: 768px) and (min-width: 481px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
right: <strong>-10</strong>px;
top: <strong>0</strong>px !important;
}
.responsive #menu-item-6214 a {
position: relative !important;
top: <strong>0</strong>px !important;
}}

    When I use this code, work in IPAD, but misalignment in COMPUTER

    @media only screen and (max-width: 768px) and (min-width: 481px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
right: <strong>0</strong>px;
top: <strong>10</strong>px !important;
}
.responsive #menu-item-6214 a {
position: relative !important;
top: <strong>-10</strong>px !important;
}}

    Any suggestions to work correctly on both devices?

    THANKS

    July 23, 2014 at 7:44 am #294803
    Ismael

    Hi!

    Thank you for the info.

    We would like to see the actual website. Please post it here. A screenshot of the issue will help.

    Regards,
    Ismael

    July 23, 2014 at 7:50 am #294807
    CloudChoice
    This reply has been marked as private.
    July 23, 2014 at 8:24 pm #295103
    Josue

    Can you post a screenshot of the distorted view on iPad?

    Regards,
    Josue

    July 23, 2014 at 11:07 pm #295183
    CloudChoice
    This reply has been marked as private.
    July 24, 2014 at 12:52 am #295210
    Josue

    Hi!

    Try adjusting the top value to something like 15px:

    .sub_menu{
float:left;
z-index: 2;
font-size: 11px;
line-height: 30px;
position: relative;
top: 15px;
}

    Best regards,
    Josue

    July 24, 2014 at 1:24 am #295220
    CloudChoice

    Hi,

    Thanks for answering.

    But the problem remains when the adjustment is made on the desktop screen on the iPad screen the “logout” is above the level and shifted to the right.
    When the adjustment is done on the iPad, the computer the “logout” is below the level and shifted to the left.

    How I said:

    When I use this code, work in COMPUTER, but misalignment in IPAD (moved to upper right)

    @media only screen and (max-width: 768px) and (min-width: 481px) {
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    right: -10px;
    top: 0px !important;
    }
    .responsive #menu-item-6214 a {
    position: relative !important;
    top: 0px !important;
    }}

    When I use this code, work in IPAD, but misalignment in COMPUTER (moved to the left down)

    @media only screen and (max-width: 768px) and (min-width: 481px) {
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    right: 0px;
    top: 10px !important;
    }
    .responsive #menu-item-6214 a {
    position: relative !important;
    top: -10px !important;
    }}

    July 26, 2014 at 10:44 am #296191
    Dude

    Hey!

    Try this code:

    
@media only screen and (max-width: 768px) and (min-width: 481px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
right: -10px;
top: 0px !important;
}
.responsive #menu-item-6214 a {
position: relative !important;
top: 0px !important;
}

.responsive .avia-ipad #header .sub_menu, .responsive .avia-ipad #header_meta .sub_menu>ul {
right: 0px;
top: 10px !important;
}
.responsive .avia-ipad #menu-item-6214 a {
position: relative !important;
top: -10px !important;
}
}

    Regards,
    Peter

    July 26, 2014 at 6:52 pm #296265
    CloudChoice

    Thanks.

    Now is working.

    THANK YOU.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘keep the position of Social bookmarks and Secondary menu’ is closed to new replies.