Try to search your question here, if you can't find : Ask Any Question Now ?

Whatever happened to my buttons when i switch to mobile view?

HomeCategory: stackoverflowWhatever happened to my buttons when i switch to mobile view?
Avatarpushpa asked 2 weeks ago

Let me start off by apologizing. I’m new to HTML, CSS, and PHP. And have basically no knowledge of Javascript.

Dew to time issues, I downloaded a template called Horizons by Templated in order to use the CSS.

This .CSS uses Javascript to initialize mobile view witch makes the buttons go from inline to block.

At first it was all sunshine and rain bows but suddenly this happened to my buttons:

Basically they go out of the div
Like so. (outlines of div and button)
I don’t know what to do. Since its not like adding an @media and screens command.

I do have a

mobile: { range: '-640', href: 'css/style-mobile.css', containers: '90%', grid: { gutters: 15, collapse: 2 } }

and a

body, input, select, textarea {
    font-size: 11pt;
}

.button {
    display: inline-block;
    width: 100%;
    min-width: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 2.75em;
    height: 2.75em;
    margin: 1.5em


}

inside the style-mobile.css.

In my regular style.css I have:

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
    background: #4368b1;
    border-radius: 40px;
    border: 0;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 0.80em 2em;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 600;
    min-width: 9em;
}

Don’t know if this affects, but I am running my index as:

<?php
require "header.php";

and the rest of my body inside the page I’m having trouble with.

I’m not sure on what to do. Any help is appreciated.

1 Answers
Best Answer
AvatarJyoti answered 2 weeks ago
Your Answer

15 + 17 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com