Advertise Here

[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x

Responsive Web

931

Solutions

7

Content

1K

Contributors

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Related Topics

Share tech news, updates, or what's on your mind.

Sign up to Post

Question by

nsitedesigns

2017-10-02Solved

?

mouseover button color

http://25a.e58.myftpupload.com/

Client likes how the "Learn More" buttons on home page below circle icons have a green mouseover effect.

We duplicated this button for the Careers page and modified the css so is sits flush left. We had to rename the button on the careers page from .entry-content a.more-link to .entry-content a.jobs-link. Now the mouseover color change to green doesn't work. I can't figure out how the original buttons on the home page are calling for a green mouseover since that stylization came with the theme.

Careers "Current Openings" button:

.entry-content a.jobs-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin-top: 20px;
    margin-bottom: 26px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 130px;
}

Open in new window

Home page "Learn More" button

.entry-content a.more-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window

0

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question by

nsitedesigns

2017-10-02Solved

?

Crumb trail not working properly

When you click on the Locations button (http://25a.e58.myftpupload.com/cloverleaf-locations/) and select a location (i.e. CCS Sioux City Plant 1), the crumb trail does NOT include the fact that you clicked on the Locations button and THEN clicked on a specific location.

I am guessing that this might be happening since the locations page is actually a chart. Hoping there is a workaround.

I am using Studio Press.

Here is screenshot of how I think the crumbs should be displayed: https://screencast.com/t/wAKesTWh7Q
Here is screenshot of the breadcrumbs dashboard so you can see I have checked everything: https://screencast.com/t/vZOLV8tE

I found this link but I don't think it helped any.
http://rickrduncan.com/pro/wordpress/genesis/customize-genesis-breadcrumb

0

Question by

Willie mat

2017-10-01

?

URL Redirection or dialog/feed

I had this question after viewing How to redirect after a user shares something one facebook.
Hi, I am a man in the street who knows nothing about coding……Please help, My aim is that when FB visitors click on this link on my post: https://www.facebook.com/sharer/sharer.php?u=https://goo.gl/nsbpk5
It will obviously take them to share dialogue, and when they click share, I need them to be redirected (URL Redirection or dialog/feed) to this one: https://goo.gl/HSo5rf this one has to pop up. So how do I join these hyperlinks to make one?
I tried this: https://www.facebook.com/sharer/sharer.php?u=https://goo.gl/nsbpk5&redirect_uri=https://goo.gl/HSo5rf
but it gives me a this blank page after clicking SHARE: https://www.facebook.com/dialog/return/close#_=_
In short this should be a full page display, shown within Facebook.com.
and a popup page should be compatible to Mobile web apps as well.
Where did I go wrong???????

0

Client wants 3 footer widgets outlined in red to lineup ontop of each other not to the right of each other on very small screens. How do I do that?

beta site
http://25a.e58.myftpupload.com

screenshot
https://screencast.com/t/WqG7eJnFPTZ

0

Question by

nsitedesigns

2017-09-28Solved

?

move button to left edge

On this site's home page there are 3 learn more buttons below the circle icons lower down the page.
http://25a.e58.myftpupload.com/test/

Client wants this same type of button on the Careers page. I put the button in place and am now working on the css.
http://25a.e58.myftpupload.com/cloverleaf-careers/

She wants the button to float to the left so it is lined up with left margin. See screen shot
https://screencast.com/t/5UlUckbnzW

I copied the css from the home page button and put the text align to the left for the careeers button but it doesn't move. Not sure what I am doing wrong.

Original button code

.entry-content a.more-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window

New button code for careers page

/*.... Careers page jobs button ....*/
.entry-content a.jobs-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
[b]    text-align: left;[/b]
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window

0

Question by

nsitedesigns

2017-09-27Solved

?

modify footer text

Client wants to have "Dedicated to Service Since 1952" to appear at the very bottom of the site with a dark green background. This theme does not have a bottom footer widget. The closest I could do was to stylize the h6 tag but this isn't working too good either. Any ideas?

Beta site
http://25a.e58.myftpupload.com/

screen shot
https://screencast.com/t/As2cBJy087

0

Hi,

I've been building a website from a tutorial I'd followed. The tutorial was initially for bs v4 alpha but since bs beta was launched I've made changes so it now seems to work for v4 beta.

The tutorial, as I understood it, was creating a website for larger screens and using the code

 @media(max-width:768px)

Open in new window

to specify any changes to the divs or sections IDs to be applied on screens smaller than 768 - i.e. phones and smaller tablets.

However, I've tried to make some more changes to my divs using the

@media(max-width:768px

Open in new window

command line but they appear not to be working when I minimize my browser to phone size. I wonder if this is because, as I read, small size resolution - i.e. for phones is the default, so the max width query is perhaps being over-written?

If I am using bootstrap v4 beta do I have to redo the site so the @media(max-width:768px is effectively the default and I'd need to make changes using (min-width: 576px / 768px) so things look different on the medium larger screens? ALternatively is there a way at the beginning to tell bootstrap that the 'default' is 768px and upwards....Hope this makes sense...Bit confused...Thanks

0

Want to switch off some HTML-Code via CSS:
HTML

      <div class="display-breaks">
      <p> </p>
      <p> </p>
      </div>

Open in new window

CSS

.display-breaks { display: none !important; }

Open in new window

The display:none has no impact on the iPhone display with Safari, but works on the iPhone with Firefox. Any idea why?

0

Trying to get hamburger menu to display on TABLET in LANDSCAPE view. I modified the code below but it doesn't seem to make any difference. The hamburger menu DOES display on tablet in portrait view.

/* .......MEDIA SCREENS........... */

@media only screen and (max-width: 1300px) {
.content {
    float: none;
}
}

Open in new window

0

Question by

nsitedesigns

2017-09-21Solved

?

why isn't site text responsive

http://25a.e58.myftpupload.com/meat-packaging-processing/

Can't figure out why site text is not responsive. The photos seem to be responsive as they stack up at the bottom of the page below the text on smaller screens. Am at my wits end. Any help would be appreciated.

screenshot
https://screencast.com/t/SAMkvlcXlJ8

/*  media screens */

@media only screen and (max-width: 1200px) {
.content {
    float: none;
}
}



/* Before Header
--------------------------------------------- */
 
.before-header {
	padding-bottom: 20px;
	padding-top: 20px;
	text-align: center;
}


@import url('https://fonts.googleapis.com/css?family=Oswald:500|Roboto+Condensed:300,400');

.nf-field-label label {
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    font-size: 1.7rem;
    color: #016633;
}

/* BULLETS - see theme customization */

/* ........SLIDER........... */
.content .genesis_responsive_slider h2 {
    color: #fff;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: normal;
    text-transform: capitalize;
    font-family: "Oswald Medium", sans-serif;
    letter-spacing: .1em;
}


 



/* ........H TAGS........... */
h1.entry-title {
    font-size: 3.4rem;
}


header.entry-header {
    font-size: 2.4rem;
}
    
h4 {  /* used in slider*/
    color: #fff;
    font-size: 22px;
  font-size: 2.2rem;
    font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
font-family: "Oswald Medium",

Open in new window

…

0

Question by

nsitedesigns

2017-09-19Solved

?

conflicting css for sidebar formatting

I need to stylize the sidebars for some pages one way and for others another way. Can't figure out a way to modify css so text is white on green box without making text white on contact page.

Here is css for green box

/*  Locations pages green box in sidebar
--------------------------------------------- */
.greenbox-locations { 
  background-color: #016633; 
  padding:20px 10px 20px 30px;
  color:#fff;
  margin-left:30px;
  width:100%;
}

.greenbox-locations p h2 { 
  color:#FFF;
}

Open in new window

On location pages, I need to have a green box with white text.
beta link: http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1/
screenshot: https://www.screencast.com/t/a54fIOeYBdvG

On this Contact page, I need to have black text with white background.
beta link: http://25a.e58.myftpupload.com/contact-cloverleaf-storage/
Screenshot: https://www.screencast.com/t/kXVUsUV40a

here is css for contact page:

/* ........SIDEBAR ........... */

.sidebar .widget {    /* SIDEBAR IMAGES */
    padding: 0px 30px 10px 0px;
}

.sidebar {
  margin-top:60px;}


.sidebar-primary {
    background-color: #fff;
}


.sidebar p {
    margin-bottom: 16px;
}

.sidebar .widget h2 {
margin-bottom:1.3em;
font-size: 1.6em;}

Open in new window

0

Why do my navigation buttons flash a white color immediately before the mouseover color (dark green) appears?

http://25a.e58.myftpupload.com/

0

Question by

nsitedesigns

2017-09-19Solved

?

get map to fit in widget

How to I modify the google map in the left sidebar so that it fits in widget better. If I change the width of the map, then it won't resize properly.

beta site
http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1/

screenshot
https://screencast.com/t/5itICvYKxH

0

Question by

nsitedesigns

2017-09-18Solved

?

Make widget area green on SOME pages

I am trying to have the sidebar area have a green background and white text like this wireframe.

Screenshot
https://screencast.com/t/8chlxupaVN

Beta page
http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1-flipped/

Why does the green box appear above all text?

I am using a widget for the sidebar. Here is the code in the widget

<span class="greenbox-locations">
<h2>CCS Sioux City Plant 1</h2>
2900 Murray Street
Sioux City, IA 51111
(712) 279-0918

Plant Manager
(712) 279-0918 xXXX

Regional Director
(712) 279-8000 xXXX</span>

<strong>MAP GOES HERE</strong>

Open in new window

Here is css

.greenbox-locations { 
    background-color: #016633; 
  padding:5px 30px;
}

Open in new window

0

http://25a.e58.myftpupload.com/ccs-cherokee/
trying to get map to resize as page viewport gets smaller.

0

Question by

weikelbob

2017-08-29Solved

?

Responsive CSS/HTML - How to Center Video All Devices

Hello,

How do we get this video to be centered and look good (full video with right spacing) on all devices - desktop, tablet, mobile.

Home page of www.idiaper.com

<div id="containerVideo" style="text-align:center;width:70%">
    <div id="largeVideo" style="width:400px;float:right">
      <iframe src="//www.youtube.com/embed/rnbBUMN06oU?showinfo=0" allowfullscreen="yes" width="400px" height="225px" frameborder="0"></iframe>
      </div></div>

Open in new window

#containerVideo
{
padding-bottom:0px;
}

#largeVideo {
position: relative;
    padding-bottom: 35%;
    padding-top: 24px;
height: 0;
width:100%;
max-width:500px;
text-align:center;
}
#largeVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:451px;
}

Open in new window

0

Question by

nsitedesigns

2017-08-21Solved

?

Learn more button center on widget

How do I center the Learn More button on the three widgets on the home page below the animation? I tried display:block but that didn't work.

Beta site
http://25a.e58.myftpupload.com/

.entry-content a.more-link {
	background-color: #5a5853;
	border: 1px solid #ddd;
	color: #fff;
	clear: both;
	display: block;
	margin-top: 20px;
	padding: 5px; 
	text-align: center;
	text-decoration: none;
border-radius: 8px;
width: 100px;
display: block;
}

Open in new window

0

Question by

nsitedesigns

2017-08-16Solved

?

Center text on widgets

I am trying to center text on the 3 widgets (3 circles with icons). But, when I modify the css, it centers text on all pages! Somehow I am not specifying the correct css to just modify the text in the widgets. I tried modifying the below at it had no effect.

entry-content {
  text-align:center;}

Open in new window

http://25a.e58.myftpupload.com/

0

Can anyone recommend a wordpress plugin that is for responsive tables that I can add links to the content. I found a bunch but none seem to let me modify table cell data to add html for links.

I am redesigning this site and need to find a way to organize this content like they have it with the first column having links to related pages.

Old site:
http://cloverleaf.com/locations/

Beta site
http://25a.e58.myftpupload.com/locations/
Note, I just clumped this info on this page. IT is not in a table.

0

If you keep the mobile phones safe in your pocket or purse, it's still at risk for picking up a virus or leaking data to thieves. Hackers don't need physical access to your phone to steal your personal information or infect the device with malware. They infiltrate your phone with innocent-looking apps or link to it via unsecured Wi-Fi networks. A Technology blogging site (http://www.mobileblog24.com/ ) talking about this problem. Before some days I take my new phone from online shopping site (https://www.buymobile.com.bd/). Some informative site (http://www.bbc.co.uk/ ) also provide disadvantage of hacking. Now I want to know how can protect my mobile phone from being hacked?

0

In the footer of this page are 3 small thumbnails (baby,back and foot). These are set to be 1/3 the size of the page but they appear shifted to the left and they do not fill the footer screen. What did I do wrong?

http://fallshealingarts.com/

0

Hello,

On this page:

www.idiaper.com

There's a "Shop by Categories" area.

How do I get the category buttons centered in desktop and mobile?

#categories-frontp
{
text-align:center;
}

.banner-frontp
{
padding: 0px 0px 15px 0px;
text-align:center;
max-width:935px;
height:auto;
}

.buttons-frontp
{
text-align:center;
max-width:935px;
height:auto;
}

.buttons-frontp img
{
padding: 11px 11px;
float:left;
max-width:182px;
height:auto;
}

Open in new window

<div id="categories-frontp">
 	<div class="banner-frontp"><img style="border:0px" alt="shop-by-category-home-page-title" src="/assets/images/shop-by-category-banner-frontp.gif"></div>
 		<div class="buttons-frontp">
 		<a href="http://www.idiaper.com/adult-pullups"><img style="border:0px" alt="pull ups button" src="/assets/images/adult-pull-ups-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-diapers-with-tabs"><img style="border:0px" alt="adult diapers with tabs button" src="/assets/images/adult-diapers-with-tabs-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-cloth-diapers"><img style="border:0px" alt="adult cloth diapers button" src="/assets/images/adult-cloth-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/mens-diapers"><img style="border:0px" alt="mens diapers button" src="/assets/images/mens-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/womens-diapers"><img style="border:0px" alt="womens diapers button" src="/assets/images/womens-diapers-frontp.gif"></a>
		 <a

Open in new window

…

0

Grrrr, not sure why I can't get this to work. I am trying to make the background of this widget area (which is now yellow) to black. When I use the inspector, it says to modify this code:

.education-pro-blue .home-middle {
   background-color: #yellow;
}

Open in new window

But when I go into my css and add this with black as the color, it never changes! Not sure what is going on. Perhaps something is overwriting it?

Screen shot
https://screencast.com/t/ZREVkzyR

Beta site
http://24a.762.myftpupload.com/

0

Question by

nsitedesigns

2017-06-19Solved

?

Widen Footer 3 Widget

I widen Footer 3 Widget that has the "Visit Us" address info at bottom of site so that the city, state and zip were all on one line.
http://681.3b0.myftpupload.com

.footer-widgets-3 {
  width:300px;
}

Open in new window

I reduced width of Footer 4

.footer-widgets-4 {
    float: left;
  width: 340px;
}

Open in new window

and that did help positions things more attractively on desktop but it laid goofy on mobile devices. The "How Can We Help" info appears flush left. I would like the "Call Us" and "Visit Us " to also float left. That is how they are setup but is doesn't work.

0

Question by

nsitedesigns

2017-06-15Solved

?

reduce size of pics in widget

I am using centric pro theme on genesis platform. On home page, there is Home 2 widget where I can put a featured page and can show featured image.

The size options offered are not ideal. The one we are using now is pretty large at 960x700. Is there a way we can modify it so there is a smaller size option? The next size down is 400x300 which is too small.

screenshot of widget
https://screencast.com/t/Wje1umCQSdL

Beta site
http://681.3b0.myftpupload.com

0

First
Prev
1
2
3
4
5
6
7
Next
Last

Responsive Web

931

Solutions

7

Content

1K

Contributors

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Related Topics

Top Experts In

Responsive Web

<

Monthly

>

1

EddieShipman

3,000 points

LVL 26
2

Jim Riddles

3,000 points

LVL 9
3

Chris Stanyon

1,500 points

LVL 44
4

HainKurt

1,500 points

LVL 60
5

Jackie Man

1,000 points

LVL 49
6

Federico Ribis

1,000 points
7

Yashwant Vishwakarma

42 points

LVL 7
8

Julian Hansen

35 points

LVL 59
9

Gene Richardson

22 points

LVL 6
10

Oscar Waterworth

20 points

LVL 6
11

Lexie Lu

20 points

LVL 6