Hello, if my theme is responsive, why does it not automatically format to fit my screen on my iPhone?

absolutefiasco
asked 10 years ago

3 Answers

DominicStaff
answered 10 years ago

Hi,
Please tell me detail about this issue, you can send me your site & a screenshot for further checking.

Rashieda Witter
replied 10 years ago

Dominic, I figured out my previous issue. However, I purchased the Timeline Pro & was wondering if there was a way to get the diamond design on the header on each page. Also, is there a way to get the same diamond design to show on the iphone version?

DominicStaff
answered 10 years ago

To resolve this issue, you can add the following code to the style.css file:

.home .banner hgroup:after {
    background: none repeat scroll 0 0 #f2664f;
    content: "";
    display: block;
    height: 280px;
    left: 50%;
    margin-left: -140px;
    margin-top: -140px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 280px;
    z-index: 0;
}

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .home .banner hgroup:after {
    height: 230px;
    left: 58%;
    width: 230px;
  }
}

If you still face there issue, you can send me your site for further checking.
Hope this helps !

Rashieda Witter
replied 10 years ago

Dominic I appreciate your help however, the code did not alter the layout at all. My site is Eclectic-Souls.com. I would like the teal diamond to be displayed behind each header (the categories listed at the top of the page). I would also like the diamond to appear on the mobile version. Also, how do I delete the menu located on the top right of the page?

DominicStaff
answered 10 years ago

To resolve this issue, you can add the following code to the style.css file:

.banner hgroup:after {
    background: none repeat scroll 0 0 #f2664f;
    content: "";
    display: block;
    height: 280px;
    left: 50%;
    margin-left: -140px;
    margin-top: -140px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 280px;
    z-index: 0;
}

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .banner hgroup:after {
    height: 230px;
    left: 58%;
    width: 230px;
  }
}

If you still face there issue, you can send me username & password of your site for further checking.
– To remove the menu located on the top right of the page, you can add the following code to the style.css file:

.timeline-scrubber { display: none; }

Hope this helps !

Rashieda Witter
replied 10 years ago

The menu on the right is still showing on the mobile version but the other code worked