Return to previous page

Tablet Responsive - by Christina - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 7 years, 10 months ago ago by Rose Tyler

Christina

Participant

January 26, 2017 at 16:53

Hey!

Sorry 8Theme! I know I have contacted you quite a bit lately, but I am in the final stretch of the design of the website, just a few little glitches that need to be worked out before we launch! And you guys offer amazing help!

I am having some trouble with the tablet responsive design.

This is happening for both of my sites. AidaCorp.com and BuyAida.com, some of the buttons and the footer logo is aligned to the left. I would like these to be aligned in the center so it flows with the rest of the site on the tablet.

AidaCorp.com (homepage) – On the top bar, “Click to Shop” button centered (which should take affect on all the pages), the picture under “Aida Products” centered, the logo in the footer centered. On the other pages, the “call to action” at footer 1 the button needs to be centered. Also, I have some spacers that make the pictures look good on the desktop, but the tablet and mobile have too much space (company page).

If you could give me the codes to adjust these couple issues, I should be able to duplicate that on my other site and fix the similar issue.

Thanks again, I know it’s information overload!

Please, contact administrator
for this information.

#153152 Copied Theme version: 2.8 WooCommerce version: 2.4x

9 Answers

Rose Tyler

Support staff

January 27, 2017 at 11:40

Hello,

I’ve added some code in your Custom CSS and Custom for Company page http://prntscr.com/e0z03a http://prntscr.com/e0z1b2 . Clear browser cache, and check.

Regards,
Rose Tyler.

#153224 Copied

Christina

Participant

January 27, 2017 at 15:44

That’s great, thank you. I noticed that the “click to shop” button has changed on the homepage and company page, but the other pages it is still aligned left?!

So I used some of those codes for my ecommerce page (buyaida.com) and it changed the background color white, but only on the desktop view?! Can we get this fixed?

#153265 Copied Theme version: 2.8 WooCommerce version: 2.4x

Christina

Participant

January 27, 2017 at 16:02

I also put this code in the custom CSS for the tablet boarder size, but it doesn’t seem to be changing. Is this code correct?

body.bordered .body-border-left, body.bordered .body-border-right {
width: 8px;
}
body.bordered .body-border-top, body.bordered .body-border-bottom {
height: 8px;
}

And how do I get this to work for the tablet view?

#153266 Copied Theme version: 2.8 WooCommerce version: 2.4x

Rose Tyler

Support staff

January 27, 2017 at 16:05

Hello,

I’ve added text-align: center; for button and changed Site Background http://prntscr.com/e12aun http://prntscr.com/e12ca7
Clear browser cache, and check.

Regards,
Rose Tyler.

#153267 Copied
Rose Tyler

Support staff

January 27, 2017 at 16:17
Hello,

If you want to use the code for the border, you need to add this also
```
body.bordered {
    border-width: 8px;
}
```
Regards,
Rose Tyler.
#153272 Copied
Christina

Participant

January 27, 2017 at 17:25

Hello again,

The background color seems to continue to switch back to white for some reason? I have no idea why….

this is the code I added to the Global Custom CSS

@media (max-width: 768px){
.main-footer p {
text-align: center !important;
}

.vc_general.vc_cta3 .vc_cta3-actions {
text-align: center;
}

and then this code on the tablet Custom CSS

body.bordered {
border-width: 8px;
}
body.bordered .body-border-left, body.bordered .body-border-right {
width: 8px;
}
body.bordered .body-border-top, body.bordered .body-border-bottom {
height: 8px;
}

after those two edits, that is when I began experiencing the background color to continue to turn white?! Any ideas of why this may be?

Also, the width of the boarder for the tablet is not scaling properly?!

#153285 Copied Theme version: 2.8 WooCommerce version: 2.4x

Rose Tyler

Support staff

January 30, 2017 at 11:33

Hello,

Sorry for a delay.
Go to Theme Options > Color Scheme > Site Background and change it http://prntscr.com/e25mul
Also, you forget to close }. Clear browser cache, and check your border.

Regards,
Rose Tyler.

#153429 Copied

Christina

Participant

January 30, 2017 at 16:04

Thanks, that worked for the background color.

I am still having trouble with the boarder sizes. I just tried to scale the tablet like I did for the mobile awhile back, but now both the tablet or mobile will not scale down.

How can I fix this?

#153476 Copied Theme version: 2.8 WooCommerce version: 2.4x

Rose Tyler

Support staff

January 30, 2017 at 16:34

Hello,

As I see, your code works fine http://prntscr.com/e29mq6 .
Don’t forget to clear browser and server cache before checking.

Regards,
Rose Tyler.

#153480 Copied
Tagged: best selling, responsive, tablet, themes, woocommerce
Viewing 10 results - 1 through 10 (of 10 total)