Home Forums Porto Template Re: Responisive Design and ID Class scrolling

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 day, 12 hours ago. This post has been viewed 45 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10030255

    trimore
    Participant

    Hi,
    I am having a few issues. I have uploaded so you can view at:
    http://www.tri-moreinc.com/reciprocityproject/home.html
    My issues are the following:
    1) I have uploaded through FTP and the responsive design is not working. If you scroll down to “Friends of Reprocity Project” the images are not downsizing for smaller device. In fact they get bigger. Is there some code I need to customize for mobile device, etc.? In addition, I would like the class ID in to be able to scroll directly to where it is suppose if I hit menu Nav for Home, mission, friends, footer. In general it does this, but it goes a bit over. I would like it to go right where it is suppose to for class ID.
    This is just a one-page design I am adding to existing site.
    Please let me know. Thank you. Lisa


    #10030256

    Support2
    Keymaster

    Hello,

    We did a test in your website and the images on “Friends of Reprocity Project” are resizing correctly on mobile devices. Maybe you already fixed this ?

    Regading the correct scroll position when click on menu items, you can control the position trough data-hash-offset values. For example:

    <li>
    	<a class="nav-link" href="#friends" data-hash data-hash-offset="80">
    		Meet Our Friends
    	</a>
    </li>

    * Probably data-hash-offset="80" is the best value for the “Meet Our Friends” section.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030257

    trimore
    Participant

    I see everything else is working on the responsive side, but the arrows on the slider are not resizing. I would like the email and telephone number on the first nav bar to display with the menu bar, and the images to be smaller of the people (nick gall, bo hu, etc.). Is there someway to correct the resizing of their images to be smaller on responsive, or do I have to make the images smaller myself. I have resized the images twice, and they are not much smaller on my phone, but on a bigger device they look fine. If I test it on Dreamweaver they resize perfectly, but when I upload on FTP to my hosting account they remain big on mobile device.
    Let me know. Thank you for the other answer on the scroll position. I am going to fix that one right now.
    Lisa


    #10030260

    Support2
    Keymaster

    Hello,

    Regarding the email and telephone, please note that don’t have enough space to show the email on mobile devices, because of that this is being hidden with the class hidden-xs.

    I saw that you are using a very old version of Porto. On the most recent versions of Porto we made a lot of changes that turns better the responsive of this type of header. My suggestion for you is use this CSS code in (css/custom.css) to get a better layout on mobile:

    @media(max-width: 991px) {
    	#header .header-column .header-extra-info .feature-box h4, #header .header-column .header-extra-info .feature-box h4 a {
    		font-size: 16px;
    	}
    }
    
    @media(min-width: 768px) {
    	.header-btn-collapse-nav {
    		margin-bottom: 26px !important;
    		margin-top: 20px !important;
    	}
    }
    
    @media(max-width: 767px) {
    	#header .header-column .header-extra-info .feature-box.feature-box-call .feature-box-info {
    		padding-top: 7px;
    	}
    }
    
    @media(min-width: 768px) and (max-width: 991px) {
    	.header-btn-collapse-nav {
    	    position: relative;
    	    top: 5px;
        }
    }

    Also enable the stickyChangeLogo on the header tag:

    <header id="header" class="header-no-border-bottom" data-plugin-options='{"stickyEnabled": true, "stickyEnableOnBoxed": true, "stickyEnableOnMobile": true, "stickyStartAt": 115, "stickySetTop": "-115px", "stickyChangeLogo": true}'>

    Regarding reduce the carousel image size on mobile, my suggestion for you is wrap the carousel inside a column:

    <div class="row mt-lg">
    	<div class="col-xs-8 col-xs-offset-2 col-md-12">
    		<div class="owl-carousel owl-theme owl-team-custom show-nav-title" data-plugin-options='{"items": 4, "margin": 10, "loop": false, "nav": true, "dots": false}'>
    			...............
    			............
    			...........
    		</div>
    	</div>
    </div>

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


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