Bryan G. Granse

I am a Front End Developer

Bryan G. Granse

I am Working as WordPress Designer and Developer, I graduated last 2014, taking a cours of Bachelor of Science in Information Technology, since then I started working as freelancers full time for my previous client, and what I am doing is to design a new website from Digital site, Agency Site, Ecommerce or Shopping site using Woocommerce, Magento, Shopify and Opencart, I am expert in terms of Managing Cpanel, On page SEO, Keyword Research, Banner Design Using Adobe Photoshop, installing WordPress CMS from scratch, connect Cpanel hosting fo a new domain, able to work full time and flexible for Emergency task or urgent task.

Me

My Professional Skills

I am a full-stack developer specializing in WordPress (Bricks, Oxygen, Elementor Pro) and custom AI-integrated websites built with React JS and Laravel. I combine technical expertise in PHP, HTML, CSS, and JS with Bootstrap responsiveness and Adobe Photoshop design to create high-performance E-commerce platforms and landing pages. My approach integrates Technical SEO, speed optimization, and CPanel management with data-driven Facebook and Google Ads strategies using Clickfunnels, Leadpages, or OptimizePress to deliver scalable, high-conversion digital solutions.

Web Design / JavaScript 90%
Web Development & Cpanel Management 85%
PHP, HTML & CSS and Mobile Responsive 95%
Wordpress / Custom WP eCommerce 98%

Website Development

I can work with less management as long as task for website is cleared, I have strong capabilities on my own suggestions about your website plan.

Animated elements

If you love to have a website sliders or Photo effects or one page design, I can do it for you I have best Themes for your website plan.

Responsive Design

Responsiveness is always one of the important thing when you have a website, and I can optimize mobile responsiveness according to your request, I use mobile media query CSS.

Modern design

I can make a good look and professional website or even you give me a website refference of what kind of website you want to be done.

Flexible and with New PC and Fast Internet

Previously I encountered problems of my internet due to basic plan so I was upgrading my plan and avail 10mpbs internet connection, which you can surely I am available during working hours or even urgent time.

Fast support

I always depend on my client (especially with the changes of particular task) and I am able to work with pressure, if the task needs to be done in a time frame I will do more effort and make the job done before the given time frame.

0
completed project
0
Clients
0
facebook like
0
current projects
Showing posts with label Breakpoints. Show all posts
Showing posts with label Breakpoints. Show all posts
  • Container Percentage For Responsiveness of Box Global Change | Min to Max CSS Breakpoints I Use

    <style>
    /* CONTAINER BOXED LAYOUT*/
    /* Ultra wide */
    @media (max-width: 3840px) {
    .c-box {--content-width: 55%;}}
    /* Desktop */
    @media (max-width: 1920px) {
    .c-box {--content-width: 65%;}}
    /* Laptop big */
    @media (max-width: 1600px) {
    .c-box {--content-width: 74%;}}
    /* Laptop small */
    @media (max-width: 1366px) {
    .c-box {--content-width: 77%;}}
    /* Tablet portrait */
    @media (max-width: 1200px) {
    .c-box {--content-width: 80%;}}
    /* Mobile */
    @media (max-width: 767px) {
    .c-box {--content-width: 85%;}}
    </style>

    Using This you can do a global change in any screen size for better optimization of website responsiveness, I just wrote it here for my reference, this is based on Rino's tips, and many thanks to him as I've been using this for quite some time on my project.

    This one below is also working for my 27inches screen monitor.

    @media screen and (min-width: 1280px) {
        /*Your CSS Code here*/
        .our-services-class {
            margin-top:250px;
        }
    }

    Just paste this code before closing the tag of HEAD HTML, or if you're using Elementor PRO, just it in the global page custom CSS

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        /* Styles */
        }
       
        /* Smartphones (landscape) ----------- */
        @media only screen and (min-width : 321px) {
        /* Styles */
        }
       
        /* Smartphones (portrait) ----------- */
        @media only screen and (max-width : 320px) {
        /* Styles */
        }
       
        /* iPads (portrait and landscape) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        /* Styles */
        }
       
        /* iPads (landscape) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
        and (orientation : landscape) {
        /* Styles */
        }
       
        /* iPads (portrait) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
        and (orientation : portrait) {
        /* Styles */
        }
        /**********
        iPad 3
        **********/
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
        and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
        }
       
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
        and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
        }
        /* Desktops and laptops ----------- */
        @media only screen  and (min-width : 1224px) {
        /* Styles */
        }
       
        /* Large screens ----------- */
        @media only screen  and (min-width : 1824px) {
        /* Styles */
        }
       
        /* iPhone 4 ----------- */
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
        and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
        }
       
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
        and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
        }
       
        /* iPhone 5 ----------- */
        @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        /* iPhone 6 ----------- */
        @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        /* iPhone 6+ ----------- */
        @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        /* Samsung Galaxy S3 ----------- */
        @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
        /* Styles */
        }
       
        /* Samsung Galaxy S4 ----------- */
        @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
        /* Styles */
        }
       
        /* Samsung Galaxy S5 ----------- */
        @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
        and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
        /* Styles */
        }
       
        @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
        and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
        /* Styles */
        }


  • GET A FREE QUOTE NOW

    I am flexible and would like to work with you long term, and currently I am looking for a fulltime job with a long term opportunity, but able to work also part-time, get free qoute for project.

    Search This Blog

    Powered by Blogger.

    Mga Pahina

    ADDRESS

    Purok 5-A, Brgy. Magdum, Tagum City 8100, Davao del Norte, Philippines

    EMAIL

    gransebryan[at]gmail.com
    bryanworkdevs[at]gmail.com