Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #181759

    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 ?

    #181763
    This reply has been marked as private.
    #181909
    This reply has been marked as private.
    #182441

    Hey!

    1) Please refer to this topic for menu overlapping issue http://www.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

    #183276
    This reply has been marked as private.
    #183629

    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

    #183863

    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 ?

    #184591

    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

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

The topic ‘Responsive Design breaking some parts’ is closed to new replies.