Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 28, 2013 at 7:45 pm #181759
    dsgnerfw

    Hello guys ,

    I have a project that uses the add social media icons hack to the menu and have a few questions.

    a. On sites lower than 980 width resolution , the navigation breaks or overlaps with the social media icons.

    How do I hide both the menu and social icons and switch to responsive menu entirely ?

    b. In the site there’s a learn more H1 tag. Is there a way to reduce the margin or padding so the top of the letter is inline with the top of the video content ?

    October 28, 2013 at 7:49 pm #181763
    dsgnerfw
    This reply has been marked as private.
    October 29, 2013 at 3:00 am #181909
    dsgnerfw
    This reply has been marked as private.
    October 30, 2013 at 2:43 pm #182441
    Yigit

    Hey!

    1) Please refer to this topic for menu overlapping issue https://kriesi.at/support/topic/collapsable-menu/#post-165144
    2) You can add following code to Quick CSS in Enfold theme options under Styling tab to hide social icons on screens smaller than 522px and change its position on screens smaller than 767px

    @media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { width: 25%; }}
@media only screen and (max-width: 522px) { .responsive #header .social_bookmarks { display: none; }}

    3) You can add following code and adjust it to make h1 inline with video

    .home .template-page .entry-content-wrapper h1 { margin-top: -5px; }

    Best regards,
    Yigit

    November 1, 2013 at 7:52 am #183276
    dsgnerfw
    This reply has been marked as private.
    November 2, 2013 at 5:41 am #183629
    Ismael

    Hi!

    You can use this media query to target resolutions between 768px to 989px. Example is for the social icons below.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.iconbox_content_container h3 {
font-size: 15px;
}
}

    There is something wrong with the markup. Why do you need to separate these two?

    <h3>LIKE TANYA</h3><h3>ON FACEBOOK</h3>

    It should be

    <h3>LIKE TANYA ON FACEBOOK</h3>

    Best regards,
    Ismael

    November 3, 2013 at 5:10 am #183863
    dsgnerfw

    The designer intended that to be separate , and not in 1 line.

    I wanted to use like 1 line but he want’s like a pyramid kind of look. I know this isn’t ideal. Any workarounds on this ? Possible to center the text and icons in the bottom yellow part so they are responsive , including lower resolutions ?

    November 5, 2013 at 2:59 am #184591
    dsgnerfw

    I found a solution >
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    @media only screen and (min-width: 320px) and (max-width: 640px) {

    It’s hard to work on every resolution so this is my best bet. Still working on 768 – 989 but I’m almost done

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Responsive Design breaking some parts’ is closed to new replies.