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

This topic contains 8 replies, has 2 voices, and was last updated by  Support2 4 days, 14 hours ago. This post has been viewed 145 times

Viewing 9 posts - 1 through 9 (of 9 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.


    #10030517

    trimore
    Participant

    Okay, so I did what you said for the carousel images. Images are reduced significantly, but when I see them on my 15″ laptop it looks funny and title below images are now off. Should I remove code you gave me to fix this? I really need to fix this issue. I applied the customer code as well. When viewing the site, please down size the browser, so you can see what I am talking about. Mobile device (responsive design) is fine, desktop/laptop, not so good.


    #10030524

    Support2
    Keymaster

    Hello,

    Unfortunately we couldn’t reproduce this issue with title below the images.
    We did tests with a lot of laptop resolutions and it’s normal in all tests. Can you please send a screenshot for us showing the issue ? And wich resolution exactly the issue occurs ?

    Kind Regards,

    Rodrigo.


    #10030528

    trimore
    Participant

    Hello,
    I just wanted to let you know that all the responsive design is working when I reduce the browser, especially in Safari. The only issue I am having is the last one where the name and title of the person on the images is off center and viewing to the right when the browser is in actual size on my MacBook pro. I sent you the images on the last response.
    Again, thank you for your help.
    Lisa


    #10030530

    trimore
    Participant

    Re: Regarding reduce the carousel image size on mobile, my suggestion for you is wrap the carousel inside a column:
    Hello,
    So I took out the column wrap for carousel because it caused other issues (that I previously mentioned before this response). With all the other fixes (which I uploaded) it looks nice with the carousel (images and titles) on the website in both full and reduced browser on my MacBook pro. Where I think it could be improved is if you could find a better responsive design for this section of my design where the images and titles could be reduced on a mobile device for better viewing, as I think your customers would appreciate it. I know I would. As I said I love your Porto template, and would like to use it more on all my designs.
    If you find a solution for this, or could work on a solution for this, I would really appreciate it. Also on the image slider after header for responsive viewing. I added in all fixes in CSS Custom and it looks better, but “arrows and “animated text” still do not display the best as I think they could for mobile viewing.
    thank you for all your help, and let me know if any of these issues could be further resolved.
    Lisa


    #10030536

    Support2
    Keymaster

    Hello,

    Regarding carousel issues with alignment probably the issue is syntax errors in your HTML (as mentioned on the another topic you created). Please try with the code provided on the another topic.

    Regarding slider please first replace your current HTML to:

    ...
    ...
    ....
    <div id="revolutionSlider" class="slider rev_slider">
    ....
    ......
    ........

    Change the slider code in “js/demos/demo-law-firm.js” to:

    // Slider
    $('#revolutionSlider').revolution({
    	sliderType: 'standard',
    	sliderLayout: 'fullwidth',
    	delay: 9000,
    	gridwidth: 1170,
    	gridheight: 650,
    	responsiveLevels: [4096,1200,992,500],
    	spinner: 'spinner3',
    	disableProgressBar: 'on',
    	parallax: {
    		type: 'off',
    		bgparallax: 'off'
    	},
    	navigation: {
    		keyboardNavigation: "on",
    		keyboard_direction: "horizontal",
    		mouseScrollNavigation: "off",
    		onHoverStop: "off",
    		touch: {
    			touchenabled: "on",
    			swipe_threshold: 75,
    			swipe_min_touches: 1,
    			swipe_direction: "horizontal",
    			drag_block_vertical: false
    		},
    		arrows: {
    			style: "uranus",
    			enable: true,
    			hide_onmobile: false,
    			hide_onleave: false,
    			tmp: '',
    			left: {
    				h_align: "left",
    				v_align: "center",
    				h_offset: 20,
    				v_offset: 0
    			},
    			right: {
    				h_align: "right",
    				v_align: "center",
    				h_offset: 20,
    				v_offset: 0
    			}
    		},
    		bullets: {
    			enable: true,
    			hide_onmobile: true,
    			style: "dione",
    			hide_onleave: false,
    			direction: "horizontal",
    			h_align: "center",
    			v_align: "bottom",
    			h_offset: 20,
    			v_offset: 30,
    			space: 5,
    			tmp: '<span class="tp-bullet-img-wrap">  <span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'
    		}
    	}
    });

    * Here is where you can change the settings for arrows. Note the arrows left right options where you can change positions.
    * Also note that I added the option responsiveLevels. This option allow to use responsive levels to position the slide layers in different resolutions (4096px, 1200px ,992px and 500px).

    For example to get different position for each resolution of the text “INTERNATIONAL COMITY”:

    <div class="tp-caption top-label"
    	data-x="right" data-hoffset="['100','100','200','200']"
    	data-y="center" data-voffset="-55"
    	data-start="1000"
    	style="z-index: 5"
    	data-transform_in="y:[-300%];opacity:0;s:500;">INTERNATIONAL COMITY</div>

    * Note the data-hoffset="['100','100','200','200']" with responsive levels. This is the value for position for each resolution level (defined previously on the slider options).

    Regarding the slider arrows size: We provided a code that changes the font-size of arrrows before. This is the only way to change the size of arrows, so please find the best value for mobile.

    We hope this helps.

    Kind Regards,

    Rodrigo.


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